Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

趣味で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');
}

以上です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away