22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

React - カスタムコンポーネントの基本

React 備忘録

カスタムコンポーネントを作ってレンダーする

azunobu.hatenablog.com

前回、HTML要素からコンポーネントを作成し、レンダーする方法を学んだ。

一方でReactではHTML要素をコンポーネントにするよりも、カスタムコンポーネントを作る場合のほうが多い。 カスタムとは具体的に、「独自のスタイル要素を指定してH1要素にデザインをあてる」といった意味ではなく、 部品となるカスタムコンポーネントをクラスとして定義して、HTMLドキュメントに要素を差し込む、という意味です。

手順

  1. createClassメソッドでカスタムコンポーネントを定義する
  2. renderメソッドで定義したカスタムコンポーネントを指定して要素を作成
  3. getElementByIdで差し込む位置を指定する

といった手順を踏んで、カスタムコンポーネントを定義し、レンダーします。

書いてみる

ディレクトリ構造はこのようになっています。

.
└── hello_react
    ├── sample.html
    └── src
        └── react_script.js

sample.html

HTMLはいつもどおりです。bodyにid=contentのdiv要素を置いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="src/react_script.js"></script>
</head>
<body>
<div id="content">

</div>
</body>
</html>

このid=contentのdiv要素の中身にカスタムコンポーネントとして、以下のコンポーネントを差し込みます。

<div class="hello-world-box">
    <h1>Hello World!!</h1>
</div>

src/script.js

var HelloWorldBox = React.createClass({
    render: function () {
        return (
            <div className="helloWorldBox">
                <h1>Hello World!!</h1>
            </div>
        );
    }
});

順を追って、読んでみます。

はじめに、１行目でReact.createClassメソッドで定義するカスタムコンポーネントをHelloWorldBox変数に代入します。 カスタムコンポーネントの命名規則として、代入する変数名はキャメルケースとなっています。

そして、クラスの中身としてrenderメソッドを定義しています。 ここでは、レンダーしたいHTML要素を返すようにしています。

ここで注意ですが、クラス名についてHTML的な表記ではなくてclassName="helloWorldBox"というような表記へと変える必要があります。

ReactDOM.render(
    <HelloWorldBox />,
    document.getElementById('content')
);

次に、このカスタムコンポーネントを基にして要素を作成し、HTMLドキュメントに差し込む位置を指定して、レンダーする部分を書いています。 こちらは、通常のコンポーネントと同じです。

全体としてはこのようなかたちになります。

var HelloWorldBox = React.createClass({
    render: function () {
        return (
            <div class="helloWorldBox">
                <h1>Hello World!!</h1>
            </div>
        );
    }
});

ReactDOM.render(
    <HelloWorldBox />,
    document.getElementById('content')
);

ちなみにですが、<HelloWorldBox />の部分は

React.createElement(HelloWorldBox)

という風にも書けます。

動作を確認してみます。

https://gyazo.com/a83b62e34be314ce458d6f324428531c

うまく、差し込まれていることがわかります。

以上です。

参考

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発