Reactを学ぶ中で必ず押さえておきたいこと①

スポンサーリンク

0. はじめに

スマホアプリを開発するにあたり、React Nativeが流行ってきているようですね。
React Nativeに触れる前に、まずReactについて勉強しとかないといかんなということで、記事にまとめておきたいと思います。

1. Reactとは

開発元はFacebookで、一言でいうとUI部品を作るためのjavaScriptライブラリになります。
Facebook、Instagram、GitHub ATOM、Twitterモバイル等で使用されています。

2. Reactの特徴

2-1. Just the UI

フレームワークでなく、あくまでUIを構築するためのライブラリになります。MVCでいうVのみ機能を提供します。
ライブラリに属するため、Angular.jsやBackbone.jsと一緒に使用することが可能です。

2-2. Virtual DOM

実際のDOMと対となる構造体を用意し、その構造体に対して処理を行います。
その結果生まれた差分だけを実際のDOMに反映することで、UI表現の高速化を実現しています。

2-3. Data flow

データの変更に応じてUIの変更が行われる、単方向データバインディングの仕組みが利用されています。
そのため、コードの複雑性を避け、シンプルな設計が可能となります。
(ちなみにVue.jsは双方向データバインディング)

3. Reactで作られたWebアプリ

Made with React

上記のサイトで、React(もしくはReact Native)で作られたWebアプリがギャラリー形式で掲載されています。Reactを使うとこんなものが作れるんだーとイメージできるかもです。

4. Reactの環境構築

4-1. Node.jsのインストール

Reactの環境構築には、Node.js(Ver4以上)がインストールされている必要があります。
Node.jsのインストール方法については以下を参照ください。

4-2. Reactのインストール

以下のコマンドを実行するだけです。

npm install -g create-react-app

5. アプリの作成とサーバーの起動確認

5-1. アプリの作成

以下のコマンドを実行します。

create-react-app test-app (作成したいフォルダ名)

すると以下のような構成でフォルダができます。

test-app.PNG

5-2. サーバーの起動確認

作成したフォルダへ移動し、サーバーを起動します。

cd test-app  // 移動して
npm start    // 起動!

ブラウザにて http://localhost:3000/ にアクセスします。
以下のような画面が表示されればOKです。

起動.PNG

6. IDE

ReactのIDEはVisual Studio Codeがおススメです。
Visual Studio Codeでは以下のようにしてデバッグを行うことができます。

6-1. Debugger for Chromeをインストール

Visual Studio Codeの拡張機能メニューから、Debugger for Chromeをインストールします。

vdcode.png

6-2. launch.jsonの設定

launch.jsonを開き、以下のように設定します。
(url、webRootは環境に合わせて書き換えてください。)

設定.png

6-3. デバッグする

サーバーが起動していなければ起動してください。
その後以下のボタンからデバッグが行えます。(メニューから、デバッグデバッグの開始でもOK)
もちろんブレークポイントもはれます。
てかデバッグ実行と同時に起動することもできるのか???

デバッグ.png

Reactide

React専用のIDE<Reactide>も触ってみましたが、開発中であるためか、New Projectした時点で応答なしになりました。。。正式にリリースされるまでは使用は控えた方がいいかもです。
何か情報を持っている方は展開頂けると嬉しいです。

7. おわりに

まだ構文はなかなか慣れれずにいます^^;

で勉強したことと合わせて、Node.js + Reactなアプリを作ってみたいかと思います。

コメント

タイトルとURLをコピーしました