Reactの動作を探る

ファイルを確認
まとめてみる

ファイルを確認

自動生成されたプロジェクトhello-worldのファイル構成は次のようになっていた。

サーバー上のファイル構成と想定すると通常publicフォルダーのindex.htmlがトップページに該当する。しかし内容を見てみるとこのような一文があった。

      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.

      ※Google翻訳
      このHTMLファイルはテンプレートです。
      ブラウザで直接開くと、空のページが表示されます。

      このファイルにWebフォント、メタタグ、または分析を追加できます。
      ビルドステップは、バンドルされたスクリプトを<body>タグに配置します。

      開発を開始するには、 `npm start`または` yarn start`を実行します。
      本番環境バンドルを作成するには、 `npm run build`または` yarn build`を使用します。

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

※Google翻訳

このHTMLファイルはテンプレートです。

ブラウザで直接開くと、空のページが表示されます。

このファイルにWebフォント、メタタグ、または分析を追加できます。

ビルドステップは、バンドルされたスクリプトを<body>タグに配置します。

開発を開始するには、 `npm start`または` yarn start`を実行します。

本番環境バンドルを作成するには、 `npm run build`または` yarn build`を使用します。

このindex.htmlがそのまま表示されているわけではなく、テンプレートのようだ。さらに怪しいsrcフォルダー内のindex.jsを見てみる。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

見慣れない命令が沢山ある。しかし、全体把握を優先し細かな確認は後回しとする。ここでのポイントは、9行目の「<App />」のようだ。

    <App />

<App />

これがなぜポイントかというと、サイトを表示すると「Edit src/App.js and save to reload.」と表示される。つまり、App.jsがメイン処理と推測できるからである。この「<App />」でApp.jsを呼び出しているのだろう。

App.jsの中身を見てみる。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

return (

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

Learn React

</a>

</header>

</div>

);

}

export default App;

サイトの表示内容と見比べると、それに該当するHTMLらしき命令があることから、こちらがメイン処理で間違いない。

まとめてみる

public/index.htmlはテンプレートのHTMLでこれをベースにし、src/index.jsが起動しApp.jsを呼び出しサイトの描画を完成させているようだ。

今度どのようにReactを学習していくか、このプロジェクトhello-worldを解析しながら機能追加を行っていくか、チュートリアル的なものをやってみるか、悩みどころである。

前へ＜ーーー＞つづく