【React】ひな形作成と起動方法

Reactとは?

Reactとは、Webサイト上のUI(ユーザインターフェース/画面)を構築するためのJavaScriptライブラリです。
Facebook社によって開発されました。
Vue.jsやAngularのJavaScriptのフレームワークとよく比較されますが、React自体はフレームワークではなくJavaScriptライブラリだそうです。
ただ、使用する分にはどちらの解釈でも問題はなさそうです。

 

Reactの特徴

大きな特徴として、コンポーネント指向、仮想DOMによる高速なレンダリングが挙げられます。

コンポーネント指向

コンポーネントとはReactで画面に表示される部品(ボタン、入力フォーム、モーダルなど)のことです。
部品として定義することで再利用が可能で改修や管理がしやすい利点があります。
開発規模が大きくなっても既存のコンポーネントを利用することで開発工数を減らすこともできます。

仮想DOM

Reactでは、仮想DOMという技術が使用されています
DOMとはDocumentObjectModelの略でHTMLファイルのソースコードのことではなく、
画面を表示するまでにブラウザ上で解釈されたWebページを描画するためのDOMツリーのことです。
Reactにおける仮想DOMとは JavaScript のオブジェクトで作成された仮のDOMを作ります。
その仮想DOMとリアルな実際のDOMと同期し差分があるところだけ描画するような仕組みです。
差分だけ描画するため変更されるたびブラウザが HTML を解析してすべてをレンダリングするよりもページ表示が高速なります。

Reactのひな形作成

ここではcreate-react-appを使ってひな形を作成する方法を説明します。
create-react-appを使うにはNode.jsとnpmが必須となります。
npmはJavaScriptのパッケージ管理ツールでNode.jsに含まれます
各OSに合わせてNodeをインストールしておいてください。

node -vでnodeバージョンの確認

ターミナルを起動しバージョンが出ればPCにはNode.js入っているということです。

$ node -v
v14.17.3

ひな形を作成

任意のフォルダーの中で以下のコマンドを実行します。
my-appの部分はプロジェクト名になります。
好きな文字列で大丈夫です。少し待つ必要がありますがこれでひな形を作成することができます。

 

npx create-react-app my-app

作成したプロジェクトのルートディレクトリに移動

cd my-app	

Reactプロジェクトを実行するため以下のコマンドを実行

npm start

 

ブラウザが立ち上がり以下画面が表示されたら成功です。

http://localhost:3000/

React localhost