FacebookがReactの初期バージョンを使い始めたのは、2010年代初頭のこと。しかし、アプリ開発者が安定したリリースを得られたのは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プロジェクトにツールチェーンは必要ないかもしれません。しかし、次のようなオプションをチェックしてみてはいかがでしょうか：
Nx
Gatsby
Parcel
Razzle
Neutrino
これらの開発ツールキットはどれも便利なものです。ただし、必ずしも使用しなければならないわけではありません。
ReactとJavaScriptの違いを知る
ReactとJSには共通点があるものの、Reactを使いこなすにはいくつかのハードルを乗り越えなければなりません。最も顕著な違いとしては、以下のようなものがあります：
UIの構築方法—JavaScriptでは、HTML文書の中でインターフェースを作成し、サーバーにコードを送信します。Reactでは、ブラウザ上でUIを定義します。最初は、このような短いHTMLを追加することが不自然に感じられます。しかし現実的には、同じ結果が得られます。違いは、Reactがブラウザ内で動作するのに対し、JSはサーバーの助けが必要だということです。
アプリ間での機能分担—開発者によるJavaScriptの使用方法は非常に複雑になっているため、JSのコードはしばしば耐え難いほど複雑に見えます。その結果、同じアプリで作業中に多くのファイルを開いておくことになります。Reactでは、機能をコンポーネントに分割することで、プロジェクトをより管理しやすくしています。各コンポーネントには、実行するのに必要なコードがすべて含まれています。その結果、散らかったライブラリではなく、短いリストのようなコードを得ることができます。
ユーザーデータの管理方法—Sの場合、ユーザーから送信されたデータは、ブラウザが扱うドキュメント・オブジェクト・モデル（DOM）に格納されます。例えば、テキストフィールドに名前を入力すると、その情報はサーバーに転送される前にDOMに入ります。Reactはユーザーデータを変数として保存します。ユーザーの視点では、何も変化しません。バックエンドでは、データの管理が非常に簡単になります。
Reactを使ってアプリを作る練習
JavaScriptでどれだけアプリを作ったことがあっても、Reactでアプリケーションを作り始めるには、Reactアプリガイド以上のものが必要です。W3Schoolsには、簡単なアプリケーションの作り方を教えてくれる入門書があります。 より多くの経験を積むことができます：
Reactの構文を使ってTic-Tac-Toeゲームを作る。
CodePen、CodeSandbox、Stackblitzなどのサンドボックスで実験する。
React.js コンポーネント用のUXPin Merge Libraryを作成する。
Codecademyのコースを受講する（コースはお金がかかりますが、多くの公共図書館システムは会員制で、利用者は無料でアクセスできます）
すでにJSを知っているのに、わざわざReactを学ぶ必要性
あなたがJavaScriptを使ってアプリを作ることを楽しんでいる初級開発者であれば、同じ分野の他の人たちがなぜReactに興奮しているのか不思議に思うかもしれません。その理由は、複雑な機能を実行するアプリケーションを構築する必要があるキャリアのポイントに達するとわかります。ある時点で、JavaScriptは今日のアプリ開発者のニーズに対応していないため、非常に苦痛になります。
Reactを学ぶべきなのは、その理由です：
- 再利用可能なコンポーネントを提供することで、長期的には時間を節約できます。
- DOMの落とし穴を避けることができます。
- 開発者の強力なコミュニティがあり、ツールやアドバイスを提供している。
- 急速に業界標準となりつつあります。
Reactでの構築を学ぶと、数多くのデザインパターンにもアクセスできるようになります。最初から学ぶべき推奨パターンには以下のようなものがあります：
- ステートレスコンポーネント
- 条件付きレンダリング
- レンダリングプロップ
- 制御されたコンポーネント
- Reactのフック
Reactのデザインパターンについては、「The Best React Design Patterns You Should Know About」を読むと、より深く理解できます。
UXPinでReactアプリのプロトタイプを作成・テストする（無料トライアル）
UXPinでは、Reactアプリのプロトタイプの作成とテストが簡単にできます。UXPinでのコードのテストがいかに簡単かは、「JSXプリセットのオーサリングと管理」をご覧ください。コンポーネントを UXPin Editor キャンバスにドロップするだけで、意図したとおりに動作するかどうかを判断できます。
UXPin Mergeを使えば、さらに一歩進んで、Reactを使ってデザイン全体を構築することができます。UXPin Mergeでは、コード化されたReact.jsコンポーネントをGitリポジトリからUXPin Editorにインポートし、同期させることができます。つまり、Reactでコーディングできるものは何でも、プロトタイプで見せることができるということです。また、デザイン部門と密接に連携している場合は、ハンドオフプロセスが短縮され、コミュニケーションプロセスの摩擦がなくなるため、非常に有益です。
お読み頂き、ありがとうございました。