はじめに

趣味でReactを触ろうと思い、ぼちぼち触っているものの
覚えた端から忘れていくので自分用にメモ。

Reactの実行の流れ

React実行の流れとしては
トップページ（index.html）→index.js→Apps.jsの流れで動いていく

トップページ(index.html)

アプリが動作するメインのページ
以下のように記述されている。

index.html

<!DOCTYPE html>
<html>
  <head>
    <body>
      <div id="root">
      /* コンポーネントを出力する場所 */
      </div>
    </body>
  </head>
</html>

index.jsについて

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

index.js

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

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

import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

renderメソッドとは

index.jsで使われているRenderメソッドについて。

index.js

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

render(comp, target)
・comp: 出力するコンポーネント
・target: 出力先の要素

上記コードの例で言えば、下記のAppコンポーネント(./App配下のApp.jsなど)を
index.htmlの「id="root"」の要素に出力せよという意味になる。

Appコンポーネント（App.jsなど)

コンポーネント＝ページを構成するUI部品。
以下にAppコンポーネントを定義する

App.js

class App extends Component {
    render() {
        return(
            <div className = "App">
                <header className = "App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
        );
    }
}

export default App;

コンポーネントを定義する際には、Componentクラスを継承する。
class/extendsなどはES6(ES2015)導入された。
コンポーネントは頭文字は大文字で表す必要がある。
renderメソッドの戻り値はJSXで記述されたタグ

整理

これまでの流れ整理し、
index.jsでAppコンポーネントを呼び出し、Appコンポーネントのrenderメソッドが
出力内容を生成し、index.htmlの(index.jsで）指定した箇所が
反映されるといった流れになります。

JSXとは

Reactにおいて必須なJSXについて。
JSXはざっくり言うとJavaScript上でHTMLのコードを使えるJavaScriptの拡張構文。
JSXはBabelでJavaScriptに変換される。

以下の例がJSX。

app.js

import React from 'react';

function render() {
  return <div>hogehoge</div>;
}

JSXがBabelで変換されると以下のように出力される。

import React from 'react';

function render() {
  return React.createElement('div', null, 'hogehoge');
}

以上です。

React初心者の実行の流れに関するメモ書き