コンポーネントを作ろう! (2/5)
作成:2017-04-08 09:26
更新: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のコンポーネントは、非常に単純なのです。
サンプルで用意されている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') );
※関連コンテンツ