【React】コンポーネント事始め（一文字目は大文字！）

今、別シリーズでやっているメタ言語（HTMLテンプレート、AltCSS、AltJS）もコードを省略して書くだけでなく、最終的には共通部品をコンポーネント化して、それを読み込むという設計構造に向かっていくのがセオリーなようで、JSフレームワークを採用しようがしまいが最終的にはコンポーネント設計に向かっていく、と思っている。

Reactのコンポーネントの書き方

Reactでのコンポーネントの書き方をみていく。

コンポーネントの定義の仕方はいくつか方法があるようだが、簡単なのは関数として定義する形。

function コンポーネント名 ( 引数 ) {
    return JSXによる表示
}

関数名がコンポーネント名になる。ブロックの中では表示するJSXタグをreturnで返す。

定義したコンポーネントはタグとして配置できる

<コンポーネント名 />

先程の関数名の部分がタグ名になる。

※参考：コンポーネントと props – React

Reactでコンポーネントを作ってみる

実際にやってみた。

See the Pen React - component 1 by イイダリョウ (@i_ryo) on CodePen.

色付き背景の「こんにちは、こんぽおねんと。」の部分がコンポーネント！

HTMLコード

<section>
    <h1>Reactのコンポーネント</h1>
    <div class="text">読み込み中…</div>
</section>

HTMLはいつもと変わらず、.textの中にJSXを読み込んでいる。

JSコード

次にJSコード。

DOM取得

//DOM取得
const text = document.querySelector('.text');

まず変数textでDOM.textを取得。これはいつもと変わらない。

h2のテキスト

//JSXに埋め込む値
const h2Text = 'コンポーネント事始め';

変数h2TextでJSXのh2タグに入れたいテキストを設定。これも変わらない。

コンポーネントのCSSスタイル

const componentStyle = {
    background: '#fcc',
    margin: '5px',
    padding: '5px',
    borderRadius: '5px'
}

変数componentStyleでコンポーネントに当てたいCSSスタイルを設定。配列形式。値はコーテーションで括る。

コンポーネント設定

function Hello(props) {
    return <p style={componentStyle}>こんにちは、こんぽおねんと。</p>
}

関数Hello()でコンポーネントを設定。注意として、関数名の一文字目は必ず大文字にしないと行けない、というルールがある！（hello()にしたら認識されなかった。。）

関数の引数にはpropsという値を入れている。今は使われていないが、後々これを使って色々な拡張設定ができる。

pタグの中には先程のcomponentStyleのスタイルを読み込んでいる。

JSXの設定

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello />
        </div>
    </section>
);

JSXの設定の大枠は同じだが、中身に注目。<Hello />という独自名のタグがある。ここにコンポーネントが読み込まれる！

JSXのレンダリング

ReactDOM.render(elm, text);

elmのJSXをtextにレンダリングする。ここはいつもと変わらない。

JSコード全体

JSコード全体はこうなる。

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = 'コンポーネント事始め';

//コンポーネントのスタイル
const componentStyle = {
    background: '#fcc',
    margin: '5px',
    padding: '5px',
    borderRadius: '5px'
}

//コンポーネント
function Hello(props) {
    return <p style={componentStyle}>こんにちは、こんぽおねんと。</p>
}

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello />
        </div>
    </section>
);
    
ReactDOM.render(elm, text);