src/index.jsとは？
Reactのエントリーポイント（Reactアプリケーション内で一番初めに呼び出されるソース）です。
また、webpackとかを使っている場合はデフォルトでwebpackのエントリーポイント（ビルドの起点）にもなっていたりします。Reactアプリをcreate-react-appで作られている場合はwebpackはcreate-react-appにラップされているので意識しないかもしれませんが、内部的な仕組みは通常のReactと同じです。
import
| import文 | 説明 |
|---|---|
|
import React from 'react';
| Reactを利用する場合は必須 |
|
import ReactDOM from 'react-dom';
| HTML要素にAppコンポーネントを描画する場合必要 |
|
import App from './App';
| Appコンポーネントをインポートする。 |
render
|
1 2 3 4 5 6 |
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); |
- Appコンポーネント(第一引数)を<div id=root></div>(第二引数)に描画します。
- 「src/index.js」などがビルドされたJavaScriptファイルはpublic/index.htmlで読み込まれる。
- 「public/index.html」の「<div id="root"></div>」にAppコンポーネントが描画される。
<React.StrictMode>
React16.3で登場したコンポーネントです。React17でレンダリングの非同期化が実装される予定なのですが、その前にソース自体をチェックしておこうという目的で導入されたようです。
JavaScript自体のStrict Modeと同じで今までの記述方法に問題がある場合はそれを炙り出してくれます。（具体的にはコンポーネントのバグ検知、予期せぬ処理を警告してくれたりする。）なお、productionビルドではこの検査が動作せず、developmentビルドでは動作します。
また、React18からは開発モードだとStrictを有効にしていると2回マウントされてしまう現象が発生するのでもし再レンダリングの対策などをされたい場合などはこちらのコンポーネントは削除しましょう。
参考：JavaScriptのstrictモード
JavaScriptには過去のコードを動かせるようにしなければならないという暗黙のルールがあります。ただ、過去のコードを動かしてなおかつ言語の不備を改善するモードがあります。それが「strictモード」です。
宣言方法
スクリプト全体に適用
|
1 2 3 |
<script> 'use strict'; </script> |
1番上にこれを宣言したらこれ以下の文は全てstrictモードになります。
注意点
2行目以降に記述したら一切strictモードにはならなくなります。必ず1行目に記述するようにしましょう。
また、scriptタグごとに適用されるので複数のscriptタグを使う場合は全てのscriptタグごとにstrictモードの宣言をするようにしましょう。
特定の関数だけに適用
関数の1行目に宣言することでその関数だけにstrictモードを適用することが可能です。
|
1 2 3 4 |
function add(a, b) { 'use strict' return a + b; }; |
具体的にどうなるのか？
関数宣言文がブロックスコープになる。
過去のJSでは関数宣言はグローバルスコープだったのでスコープの範囲が狭まります。
var、let、constがないと変数宣言ができなくなる。
過去のJSであればvarがなくても変数宣言できました。普通にグローバルオブジェクトに組み込まれた。
この記事へのコメントはありません。