PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

ビギナーのためのReact入門:

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

作成:2017-04-08 09:26
更新:2017-04-08 09:26
■コンポーネントを組み込む
では、作成したMyComponentを画面に組み込んで表示してみましょう。

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


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


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

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



 

※プログラムリストが表示されない場合

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')
);





   


「ビギナーのためのReact入門」に戻る



※その他のコンテンツ