コンポーネントを作ろう！ (2/5)

では、作成したMyComponentを画面に組み込んで表示してみましょう。

サンプルで用意されているindex.jsを開き、そのソースコードを下のリスト欄のように修正して下さい。これで、MyComponentが組み込まれます。Webブラウザで表示を確かめてみると、「THIS IS MY COMPONENT!」というテキストが表示されます。これがMyComponentの表示です。


・importの用意
コンポーネントでは、いくつかのクラスをインポートしておく必要があります。Reactの基本である「react」「react-dom」は必ず用意します。この他、利用するコンポーネントもインポートします。ここでは、MyComponentをインポートしていますね。


・コンポーネントタグ
コンポーネントは、renderメソッドの第1引数にJSXを利用したタグとして記述をしておきます。ここでは、<MyComponent />としていますね。MyComponentクラスを定義しているだけで、このように独自のタグが使えるようになります。

コンポーネントの利用で必要なことは、これだけです。Reactのコンポーネントは、非常に単純なのです。

(by. SYODA-Tuyano.)

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

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

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

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