wackeyの“くらしメモ”と“しごとメモ”。そしてWebが好き

[Mu]ムジログ

コーディング

サンプルアプリの内容をひとつずつ確認してReactの動きを確認する

投稿日:

昨日はそのまま下記Kindle本を読んだので、今日はサンプルアプリをひとつずつ読み込んで行きます。

教材

実践

index.html

トップページというかindex.htmlのコードを読んでいきます。
new_worldの中のpublicフォルダの中にあります。

なんかいろいろ書いてありますが、

<div id="root"></div>

ここですね、ここにJavaScriptで書き込んで行く(Reactアプリの実行結果が反映される)と考えれば良いようです。この場所のことをルート要素、というっぽいです。

bundle.jsとか0.chunk.js、main.chunk.jsを読み込んでいるように見えるのですが、これがどこにあるのか、どういう中身かは今のところ謎です。
※そもそも、これのプレビューURLが「http://localhost:3000/」というのもどこから来ているかさっぱり。

index.js

こちらはnew_worldのsrcフォルダの中にあります。先ほどのindex.htmlと違う場所なので注意。

Reactアプリを実行する際に、最初に呼び出されるファイルです。

Yoshihiro Yamada. Quick Master React Sokushu (Japanese Edition) (Kindle の位置No.437-438). WingsProject. Kindle 版.

と本書で解説されているのですが、さっぱりですね。

importということでまずは何かしらimportしているようです。
また、このコードの中で本書と違う部分がありました。
「serviceWorker」の部分です。名前がそもそも変わっている気がします。

Reactを実行するために必要最小限のライブラリをインポート

import React from 'react';
import ReactDOM from 'react-dom';

アプリ固有のファイルをインポート

import './index.css';
import App from './App';

アプリ本体

ReactDOM.render(<App />, document.getElementById('root'));

renderは指定されたコンポーネントをページに反映させる、とのことです。

document.getElementById('root') はJavaScriptでもなじみ深いですね。
つまりidがrootのところに<App />の実行結果を反映させる、ということになります。

<App />・・・Appコンポーネント。引用符で囲わない、タグみたいな形で、これはJSXという形式の構文。
ここでいうJSXはFacebook社が開発したJavaScriptの拡張言語。

App.js

Reactは基本的に一つ以上のコンポーネントの集合他院いなり、今回のサンプルアプリはこのAppコンポーネントひとつだけで構成されるアプリになります。

こちらもnew_worldのsrcフォルダの中にあります。

ここも微妙に本書と記述が異なるのですが、これがコンポーネントなんだ、と理解しました。

functionでHTMLに似たものをreturnしているだけなのですが、JSXということで微妙に表記の仕方が違っています。

import React from 'react';これはindex.jsと同じですね。(本書はちょっと表記が違う)
じゃあ、これはjsファイル、というかコンポーネントのファイルには必ず入れておけよ、ということなんでしょうか。

本書ではclass構文が使われているファイルですが、このファイルではそれは存在しません。

だいたいの流れがわかった

index.htmlという土台があり、index.jsでアプリを読み込みAppアプリの実行結果を反映させる、そしてAppコンポーネントひとつで今回のアプリ全体の動きを書いている、と理解しました。

もう画面の中身はindex.htmlでもindex.jsでもなくApp.jsの中に書いて行く、というマトリョーシカまではいかないのですが、そんな構造になっています。

今日はコードを読み直して理解を深めるところまで進めました。

-コーディング
-

Copyright© [Mu]ムジログ , 2019 All Rights Reserved.