Reactを学ぶ中で必ず押さえておきたいこと①
1. はじめに
スマホアプリを開発するにあたり、React Nativeが流行ってきているようですね。 React Nativeに触れる前に、まずReactについて勉強しとかないといかんなということで、記事にまとめておきたいと思います。
2. Reactとは
開発元はFacebookで、一言でいうとUI部品を作るためのjavaScriptライブラリになります。 Facebook、Instagram、GitHub ATOM、Twitterモバイル等で使用されています。
3. Reactの特徴
3-1. Just the UI
フレームワークでなく、あくまでUIを構築するためのライブラリになります。MVCでいうVのみ機能を提供します。 ライブラリに属するため、Angular.jsやBackbone.jsと一緒に使用することが可能です。
3-2. Virtual DOM
実際のDOMと対となる構造体を用意し、その構造体に対して処理を行います。 その結果生まれた差分だけを実際のDOMに反映することで、UI表現の高速化を実現しています。
3-3. Data flow
データの変更に応じてUIの変更が行われる、単方向データバインディングの仕組みが利用されています。 そのため、コードの複雑性を避け、シンプルな設計が可能となります。 (ちなみにVue.jsは双方向データバインディング)
4. Reactで作られたWebアプリ
上記のサイトで、React(もしくはReact Native)で作られたWebアプリがギャラリー形式で掲載されています。Reactを使うとこんなものが作れるんだーとイメージできるかもです。
5. Reactの環境構築
5-1. Node.jsのインストール
Reactの環境構築には、Node.js(Ver4以上)がインストールされている必要があります。 Node.jsのインストール方法については以下を参照ください。
5-2. Reactのインストール
以下のコマンドを実行するだけです。
npm install -g create-react-app
6. アプリの作成とサーバーの起動確認
6-1. アプリの作成
以下のコマンドを実行します。
create-react-app test-app (作成したいフォルダ名)
すると以下のような構成でフォルダができます。
6-2. サーバーの起動確認
作成したフォルダへ移動し、サーバーを起動します。
cd test-app // 移動して
npm start // 起動！
ブラウザにて http://localhost:3000/ にアクセスします。 以下のような画面が表示されればOKです。
7. IDE
ReactのIDEはVisual Studio Codeがおススメです。 Visual Studio Codeでは以下のようにしてデバッグを行うことができます。
7-1. Debugger for Chromeをインストール
Visual Studio Codeの拡張機能メニューから、Debugger for Chromeをインストールします。
7-2. launch.jsonの設定
launch.jsonを開き、以下のように設定します。 (url、webRootは環境に合わせて書き換えてください。)
7-3. デバッグする
サーバーが起動していなければ起動してください。 その後以下のボタンからデバッグが行えます。(メニューから、デバッグ ⇒ デバッグの開始でもOK) もちろんブレークポイントもはれます。 てかデバッグ実行と同時に起動することもできるのか？？？
Reactide
React専用のIDE＜Reactide＞も触ってみましたが、開発中であるためか、New Projectした時点で応答なしになりました。。。正式にリリースされるまでは使用は控えた方がいいかもです。 何か情報を持っている方は展開頂けると嬉しいです。
8. おわりに
まだ構文はなかなか慣れれずにいます^^;
で勉強したことと合わせて、Node.js + Reactなアプリを作ってみたいかと思います。