インストール方法
Reactを利用するには、以下の方法がある
- CDNからの取得
- npmコマンドによるインストール
- ツールチェインによる雛形の生成
CDNからの取得
CDNからReactを取得する場合、crossoriin属性を設定することが推奨されている。
React16以降でより優れたエラーハンドリングを利用できる
- 開発用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
- 本番用(圧縮・最適化済み)
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
ツールチェインによる雛形の生成
主流なツールチェイン
- create-react-app
- Next.js
- Gatsby
create-react-app
Reactで新しくシングルページアプリケーションを作成する場合、現在最も推奨されている。バックエンドの機能は提供しないで、フロントエンドのビルドパイプラインを構築してくれる。
$ npm install -g create-react-app
$ npx create-react-app hello-react --template typescript
--typescriptでTypeScriptをデフォルトで使用可能になった
create-react-appのv3.3.0以降、–template typescriptでTypeScript用のテンプレートが作成可能になり、–typescriptオプションは現在非推奨のオプションとなっている
Next.js
Next.jsはReactを使って静的なサイトやサーバサイドでレンダーされるアプリケーションを構築する場合に人気のある、軽量フレームワーク。
Gatsby
GatsbyはReactで静的なウェブサイトを作成するのに適している。Reactコンポーネントを使用しながらも、事前にレンダーされたHTMLとCSSを出力することで最速のロード時間を保証する。