Q&A
前提・実現したいこと
コンポーネントの作成をアロー関数を用いて行なっているのが理解できない。
発生している問題・エラーメッセージ
エラーは発生していない。
該当のソースコード
index.jsに
const Test = () =>{ return ( <div> <h2>テスト</h2> </div> ) } ReactDOM.render( <Test />, document.getElementById('root') )
とあり、index.htmlに
<body> <div id="root"></div> </body>
とありました。
質問は３つあります。
・const Testの部分でなぜアロー関数を用いているのか
・ReactDOM.render の部分は
ReactDOM.render( <Test />, document.getElementById('root') )
index.htmlのid="root"の部分にTestコンポーネントを埋め込む、という意味か？
・index.htmlにどこにもindex.jsを読み込むと書いていないが、正常に表示されるのはなぜか？そもそもなぜnpm run をするとindex.htmlが呼び出されるのか？
宜しくお願いします。
回答2件
0
ベストアンサー
const Testの部分でなぜアロー関数を用いているのか
これはアロー関数が、というよりも状態を持たないことを明示するためです。
ここでいう Test は状態を持たないため、余計なメモリ割り当てなどが発生せず、また内部で状態が変わってしまって意図しないものを描画してしまうことを防げます。
詳しくは Stateless Functional Component などでググってみると良いです。
ReactDOM.renderの部分はindex.htmlのid="root"の部分にTestコンポーネントを埋め込む、という意味か？
React のソースコードを読んでみよう！ - マルシテイアや自分でコードを読んだ結果、react/setInnerHTML.js at 94f44aeba72eacb04443974c2c6c91a050d61b1c · facebook/reactで innerHTML に html を代入しているので、最終的には埋め込んでいると言ってもいいと思います。
index.htmlにどこにもindex.jsを読み込むと書いていないが、正常に表示されるのはなぜか？そもそもなぜnpm run をするとindex.htmlが呼び出されるのか？
これは index.html や package.json を見ないとなんとも言えません。
ちなみに、2つ目以降の質問は題名とそれぞれ違う質問になるので、質問を別にしたほうがより良い回答が来るかもしれません。
投稿2018/07/03 09:51
編集2018/07/03 09:54
総合スコア15
0
ReactDOM.render の部分はindex.htmlのid="root"の部分にTestコンポーネントを埋め込む、という意味か？
const Testの部分でなぜアロー関数を用いているのか
index.htmlにどこにもindex.jsを読み込むと書いていないが、正常に表示されるのはなぜか？そもそもなぜnpm run をするとindex.htmlが呼び出されるのか？
完璧なコードを提示してください。
投稿2018/07/02 00:52
総合スコア832
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。