Reactの基本的な仕組みを理解しよう (2/4)

では、作成されているソースコードを見ていきましょう。まずは、メインプログラムである「index.js」からです。下にソースコードを掲載しておきます。内容を順に説明していきましょう。

・import文について
最初に「import」といいう文がいくつも書かれていますが、これは外部のモジュールをロードするものです。このimportは、JavaScriptではあまり馴染みがないかも知れませんが、これはES6（ECMAScript 6 Edition）からサポートとなる機能です。Reactでは、「Babel」というES6対応のトランスコンパイラを使っているため、こうしたES6からの機能が利用できるようになっています。

最初に「react」「rect-dom」というモジュールをロードしていますが、これらがReactの本体となります。また、その後の「./App」「./index.css」は、ここで利用するコンポーネントとスタイルシートです。これらもまたimportでロードしておきます。

・ReactDOM.render
その後で、ReactDOMオブジェクトの「render」というメソッドを実行しています。これが、このプログラムで実行している唯一の処理です。これはコンポーネントを指定の場所にはめ込んでレンダリングを行うもので、以下のように実行します。

ReactDOM.reder( コンポーネント , 組み込み先のエレメント );

第１引数には、App.jsで定義しているAppコンポーネントを指定してあります。そして第２引数には、rootというIDのエレメントを指定しています。これにより、Appコンポーネントがrootのタグに組み込まれたコードがレンダリングされ、出力されるのです。



ここでは、renderの引数に、<App />というものが指定されていました。これがAppコンポーネントのタグなのですが、「JavaScriptの引数に、直接HTMLのタグを書けるのか？」と不思議に思ったかも知れません。

これは、「JSX」という機能を利用したものです。これは、おそらく「JavaScript Expression」を略した名前なのでしょう。このJSXは、HTMLのタグをそのままJavaScriptのコード内に記述できる機能です。単独のタグでなく、タグの中に更に別のタグが組み込まれたような複雑なものも扱えます。

<App />という値を記述することで、<App />というタグで定義されているカスタムコンポーネントをrenderに指定していたのですね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

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