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

React利用のポイントは、「コンポーネント」です。表示を行うコンポーネントを作成し、それを組み込んで表示することで画面表示を作っていきます。

コンポーネントは、基本的にJavaScriptのスクリプトとして作成をします。前回、デフォルトで作成されるAppコンポーネントの仕組みについて説明しましたね。その基本コードをそのまま使い回せば、比較的簡単にオリジナルのコンポーネントが作れます。

では、やってみましょう。まず、アプリケーションの「src」フォルダ内に「MyComponent.js」というスクリプトファイルを作成して下さい。そして、下のリスト欄のようにソースコードを記述します。これが、今回作ったサンプルのコンポーネントです。

コンポーネントは、Componentクラスを継承して作成します。クラスには必ず「render」メソッドを用意し、そこでJSXを使って作成した表示内容をreturnします。これが、コンポーネントの表示になります。


その他、今回はconstructorメソッドを用意し、そこで表示するメッセージの初期化を行うようにしてあります。基本的なコンポーネントクラスの仕組みがわかっていれば、それほど難しいものではないでしょう。


●値を出力する
ここでは、あらかじめ用意しておいた値をコンポーネントの中に埋め込んで表示させています。コンポーネントで表示する値は、以下のように用意しています。

this.msg = "THIS IS MY COMPONENT!";

コンポーネントでは、thisのプロパティとして用意しておくのが基本です。そしてこの値は以下のようにしてJSXのタグ内に埋め込まれます。

<h1>{this.msg}</h1>

{}記号を使い、値をここに出力させています。このやり方を使えば、コンポーネントの必要なところに値をはめ込んで表示を作っていくことができます。

(by. SYODA-Tuyano.)

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

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

import React, { Component } from 'react';

class MyComponent extends Component {
  
  constructor() {
    super();
    this.msg = "THIS IS MY COMPONENT!";
  }
  
  render() {
    return (
      <h1>{this.msg}</h1>
    );
  }
  
}

export default MyComponent;