(原文) A Guide to Creating Your First React App
Facebookは2010年代初頭にReactの初期バージョンを使い始めました。しかし、アプリ開発者は2020年まで安定したリリースを得ることができませんでした。その結果、開発者の中には、オープンソースの JavaScript ライブラリの使用経験が豊富な人もいれば、基本的な使い方と高度な使い方を説明した React アプリガイドの恩恵を受けられる人もいます。
幸いなことに、ほとんどの開発者は JavaScript を使用した経験をすでに持っているため、最初の React アプリをすぐに作成することができます。
Reactアプリを構築するために必要ないくつかのスキル
CSSとJSを知っていると仮定して、Reactアプリガイドを理解し、初めてのアプリを作り始めるために必要なスキルの多くをすでに持っています。最初は戸惑いを感じたら、数日続けてみましょう。また、時間をかけて「Thinking in React」を読んでみてください。多くの開発者は、5段階のチュートリアルが非常に役立つと言っています。
始めるための前提条件
JavaScript、CSS、HTMLの経験があれば、Reactを使うことはもうすぐそこまで来ています。しかし、Reactを使って何かを構築する前に、インストールする必要があります。
- Node.js
- PowerShell
- npm
- Create React App(唯一のコーディング環境ではありませんが、おそらく最高の環境です)
初めてのReactプロジェクトにツールチェーンは必要ないかもしれません。しかし、以下のようなオプションをチェックしてみるといいかもしれません。
これらの開発ツールキットはどれも重宝するでしょう。使う必要はありませんが、使うべきです。これらのツールはあなたの作業をずっと楽にしてくれるでしょう。
ReactとJavaScriptの違いを知る
ReactとJSの間には類似点がありますが、Reactを使いこなすにはいくつかのハードルを乗り越えなければなりません。最も顕著な違いとしては、以下のようなものがあります。
- UIの構築方法 - JavaScript では、HTML ドキュメント内にインターフェイスを作成し、そのインターフェイスがコードのためにサーバーに接続されます。React では、ブラウザで UI を定義します。最初は、このような短い HTML を追加するのは不自然に感じます。しかし、現実的には同じ結果が得られます。違いは、Reactはブラウザ内で動作するのに対し、JSはサーバーの助けを必要とする点です。
- アプリ間で機能的にどのように分割するか - 開発者が JavaScript を使用する方法は非常に複雑になっており、JS コードはしばしば耐え難いほど複雑に見えます。その結果、同じアプリで作業している間、多くのファイルを開いたままにしておくことになります。React は、機能をコンポーネントに分割することで、プロジェクトをより管理しやすくしています。各コンポーネントは、それが実行するのに必要なすべてのコードを保持しています。その結果、ごちゃごちゃしたライブラリというよりは、ショートリストのようなコードが得られます。
- アプリがユーザーデータをどのように管理するか - JSの場合、ユーザーが投稿したデータは、ブラウザが扱うDOM（Document Object Model）に格納されます。例えば、テキストフィールドに名前を入力すると、情報はサーバーに転送される前に DOM に送られます。Reactは、ユーザーのデータを変数として保存します。ユーザーの視点では、何も大きく変わることはありません。バックエンドでは、データの管理がはるかに簡単になります。
Reactを使ってアプリを作る練習
いくらJavaScriptでアプリを作ったことがあっても、Reactでアプリを作り始めるにはReactアプリガイド以上のものが必要になります。W3Schoolsには、簡単なアプリの作り方を教えてくれるプライマーがあります。
以下により、より多くの経験を積むことができます。
- Reactの構文を使ってチック・タク・トーゲームを作る
- CodePen、CodeSandbox、Stackblitzなどのサンドボックスで実験
- React.js コンポーネント用の UXPin Merge ライブラリを作成
- Codecademyコースを受講する（コースにはお金がかかりますが、多くの公共図書館システムでは、無料で利用できるメンバーシップを持っています。
なぜReactを学ぶ必要があるのか？
あなたがJavaScriptを使ってアプリを作ることを楽しんでいる初級開発者であれば、同じ分野の他の人たちがなぜReactに興奮しているのか不思議に思うかもしれません。その理由は、複雑な機能を実行するアプリケーションを構築する必要があるキャリアに達するとわかります。ある時点で、JavaScriptは今日のアプリ開発者のニーズに対応していないため、非常に苦痛になります。
Reactを学ぶべき理由とは...
- 再利用可能なコンポーネントを提供し、長期的に時間を節約します。
- DOM の落とし穴を回避します。
- 自由にツールやアドバイスを提供する開発者の堅牢なコミュニティを持っています。
- 急速に業界標準になりつつあります。
Reactでの構築を学ぶと、数多くのデザインパターンにもアクセスできるようになります。最初から学ぶべき推奨パターンには以下のようなものがあります。
- ステートレスコンポーネント
- 条件付きレンダリング
- レンダープロップス
- 制御されたコンポーネント
- Reactフック
あなたが知っておくべき最高のReactデザインパターンを読むことで、Reactデザインパターンについてより深い理解を得ることができます。
Reactアプリのプロトタイプを作成してテストする
UXPinでは、Reactアプリのプロトタイプの作成とテストが簡単にできます。UXPinでのコードのテストがいかに簡単かは、「JSXプリセットのオーサリングと管理」をご覧ください。コンポーネントを UXPin Editor キャンバスにドロップするだけで、意図したとおりに動作するかどうかを判断できます。
アプリ開発の経験の有無にかかわらず、UXPinは役立ちます。このクラウドベースのツールのコラボレーション機能を使って、自分のアイデアを他の人と共有しましょう。UXPinのアカウントを作成しなくても、プロジェクトを見てフィードバックを残すことができます。UXPinのアカウントを作成しなくても、適切なリンクを与えれば、他の人はプロトタイプにアクセスできます。
UXPinは、コードに落とし込む前にアイデアを検討するためにも使用できます。UXPinに搭載されているライブラリは、機能を素早く簡単にテストすることができます。気に入ったものがあれば、製品に合わせて微調整した独自のバージョンを作ることもできます。
UXPinは、世界中のプロダクトチームがアイデアをより早く製品に変えることを支援するデザインプロセスツールです。
UXPin の革新的なテクノロジーである Merge を使用すると、PayPal のような企業は DesignOps の課題を簡単に解決することができます。UXPin Merge は、最終製品との完全な一貫性を達成するために React コンポーネントを使用してデザインすることを可能にします。
本記事は2020/12/16投稿、2021/3/17更新を翻訳したものです。