概要
2013に公開されて2017年にライセンスを得てオープンソースライセンスに受け入れられました。Facebook社が開発しました。
特徴
仮想DOMの採用で高速で動作する。
採用事例
下記のようなサービスで採用されています。
- Udemy
- Slack
- Qiita
- NETFLIX
- Airbnb
バージョン
| バージョン | リリース日 | 説明 |
|---|---|---|
| 15 | ||
| 16 | 2017年9月 | |
| 16.3 | 2018年3月 | ・React18で導入予定のconcurrent renderingに備えて「Strict mode」が実装された。 |
| 16.8 | 2019年2月 | ReactHooksが登場した。React単品で状態管理できるようになった。 |
| 17 | 2020年11月 | ・新機能はない
・2年半ぶりのメジャーアップデート |
| 18 | 2022年3月 | ・開発モードかつStrict mode有効時に Bugを検出しやすくするために、 →なので開発モードの時にレンダリング回数をちゃんと確認したい場合はStrict modeを外すのが良い。 |
boilerplate
create-react-app
Facebook社が開発した最も有名なboilerplateです。babelやwebpackとかが内包されています。
インストール
下記コマンドでboilerplateのインストールが可能です。
|
1 |
yarn global add create-react-app |
また、下記コマンドでアプリケーションのインストールが可能です。
|
1 |
create-react-app react-test |
下記のコマンドでも可能です。
|
1 |
npx create-react-app react-starter |
npxコマンド
ローカルにインストールされていないパッケージをインストールしてから実行してくれるコマンド
作成されるファイル
| ファイル名 | 説明 |
|---|---|
| README.md | ドキュメント |
| node_modules | 開発環境やアプリケーションに必要なライブラリが格納されているディレクトリ |
| package.json | プロジェクト情報が記述されたファイル |
| public | |
| ├favicon.ico | ファビコン画像 |
| ├index.html | サーバーを起動して表示されるファイル |
| ├logo192.png | PWAのアイコン画像 |
| ├logo512.png | PWAのアイコン画像 |
| ├manifest.json | PWAの設定ファイル |
| └robots.txt | Googleクローラなどのクロールを制御するファイル |
| src | アプリケーションを構成するファイル（開発時はほぼここをいじる） |
| ├App.css | Appコンポーネントのスタイルが定義されたファイル |
| ├App.js | Appコンポーネントが定義されたファイル |
| ├App.test.js | Appコンポーネントのテストコード |
| ├index.js | アプリケーションのエントリポイント（アプリケーションのメインファイル） |
| ├index.css | アプリケーション共通のスタイルが定義されたファイル |
| ├logo.svg | ロゴ画像 |
| ├reportWebVitals.js | |
| └setupTests.js | テストの設定ファイル |
動かす。
起動
|
1 |
yarn run start |
下記URLでアクセス可能です。
|
1 |
http://localhost:3000 |
package.json
scripts
デフォルトでは以下のようになっています。
|
1 2 3 4 5 |
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }, |
test
以下のように指定することで「npm test」を実行した際に複数ケーステストを作成したとしても、各テストケースの詳細まで出力できるようにすることが可能です。
|
1 |
"test": "react-scripts test --env=jsdom --verbose" |
setupTests.ts
「create-react-app」におけるJestの設定ファイルになります。もし、テストライブラリにEnzymeなどを使う場合はこちらに設定を記述する必要があるようです。
Error Boundaryとは？
Error Boundary という子コンポーネントツリーでエラーが発生した際にクラッシュした UI を表示させる代わりに、フォールバック用の UI を表示するコンポーネントがあります。React16以降はエラーが発生するとコンポーネントツリーが全てアンマウントされてしまう挙動になったため出てきた概念です。（15以前はエラーが起きても白画面にならなかった。）
使うには？
基本的にはクラスコンポーネントでなければ使えなかった。ただ、Reactは昨今主流になりつつあるFunctional ComponentでもError Boundaryを使える「react-error-boundary」というラッパーを提供してくれている。
React-routerとは？
ReactでSPAによるページ遷移を実現するためのライブラリです。
特徴
ブラウザの履歴にも蓄積されるのでブラウザバック とかも普通に行えます。
インストール
|
1 |
npm install react-router-dom |
react-router-dom
Link
SPAリンクを設定するためのコンポーネントです。
withRouter
withRouterを使えば以下の記述でページ遷移させることができる。
|
1 |
this.props.history.push('遷移先のパス') |
この記事へのコメントはありません。