【React①】Reactの概要からhello-worldまで

Reactの概要

React公式
Facebookが開発したUIパーツ構築に特化しているJavaScript用ライブラリ。Facebook、Yahoo!、Uber、Airbnb、Slack、Netflixなど有名企業で採用されていて、今後のデファクトスタンダードになると期待されるライブラリ。

3つのコンセプト

• Declarative
  条件と結果が明確にコードに記載される。JavaScriptと異なる点である。従来の命令型のように、欲しいUIを頭の中で一度整理して、main要素を作って次はinput要素を作って初期値にfooを入れて、、という命令に変換しなくても、「アプリの内部状態がこの状態だったら、この見た目にする！」と宣言するように実装できる。

• Component-Based
  アプリケーションの構成要素を小さい部品(コンポーネント)の集合として考えて設計し、機能を小さい部品に分割して持たせる。部品化することで保守性を高め、再利用できるようになる。

• Learn Once, Write Anywhere
  新しい機能を追加しやすいため、開発の途中から利用されることを想定して開発できる。また、モバイルアプリ開発ではReact Native、VR開発ではReact VRフレームワークで開発することができるなど、拡張性が高い。

特徴


• レンダリングが高速

  DOM（Document Of Model）とはHTMLにアクセスする窓口の役割を果たす。DOMを生成してHTML構造や見た目を作ったりコンテンツを変更することができる。Reactでは仮想DOMという技術で、Webページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更することができる。パフォーマンスが良いため、SPA（Single Page Application）に必要な高速な動作速度を実現できる。

• 大規模なアプリケーション管理が容易
  多数のコンポーネントの再利用化ができ、管理がしやすい。レンダリング（コンポーネント指向の機能）とその他の機能も別々のモジュールとして開発されている。

• 可読性が高い
  JSXを使用することでHTMLを書いているかのようにReact内に組み込むことができる。更にTypeScriptを使えば厳密に型チェックも可能。

• 流行のUIパーツが提供されている
  google標準で使われているMaterial-UI を始め、ButtonやForm、Table等の良い感じのUIパーツが提供されていて、Reactコンポーネントとして簡単にインポートして扱える。

開発環境の準備

1. Node.jsの最新版をダウンロード

以下のページから最新のLTS（long term support）をダウンロード。
Node.js

ターミナルでNodeのバージョンを確認。

$ node -v 

2. yarnをインストール

Nodeのパッケージマネジャーであるyarnをインストール。
Node.jsをダウンロードした際に標準でダウンロードされているnpmよりも高速化つ信頼度が高い。
これらのパッケージマネジャーを使用することで、依存関係を解消できる。

$ npm install --global yarn
$ yarn --version

パッケージ管理システムについては以下参考
【JavaScript・React】基本知識

主な機能
1. ローカル環境のパッケージを更新、検索
2. パッケージインストール削除
3. 依存関係の解決、必要な依存パッケージ自動インストール
4. 設定を書いて1-3を自動化

3. 作業用にGithubリポジトリ作成

作業用にリポジトリ作成し、ローカルにgit cloneしておく。
GitHub

sample.gitをローカルのplaygroundというディレクトリにcloneする場合、

$ git clone sample.git playground

4. create-react-appをインストール

Facebook社が開発したreactのboilerplate(雛形)であるcreate-react-appをインストール。
これで、従来Bubbleやwebpack等様々なパッケージをマニュアルでインストールする必要があった問題が解消されている(ようです)。

$ yarn global add create-react-app

※npm5.2以降、Node.jsがあれば以下のコマンドでcreate-react-appインストールからplayground環境構築まで一気に終わる！🏃‍♂️

 npx create-react-app playground

create-react-appの構成
create-react-appすると以下のディレクトリができる。

• src:コンポーネントを作るJSファイル置き場

  • src/App.jsを変更すると画面が切り替わる
  • src/index.jsでDOMを使ってsrc/App.jsを呼び出し、root要素に置き換えている

• public：HTMLファイルや設定置き場

  • public/index.jsの<div id="root">がsrc/index.jsで置き換えられている
  • この中身がReactのコンポネントになる
  • faviconやロゴ

• build：本番環境用のファイル生成場所

  • npm run buildでビルド後、webpackでsrcとpublicがバンドルされる
  • cssやjsは複数出力されず、一個にまとめて出力

hello world が表示されることを確認して完了！

playgroundというディレクトリにGithubリポジトリをcloneした場合、

$ create-react-app  ../playground
$ yarn run start