React学習｜コンポーネント｜React

  • 投稿日
  • 著者 kngsmym
  • カテゴリー react

ソースの一部を切り出してコンポーネント化することができる。

切り出し前ファイル

例として以下のソースからLayoutクラスを切り出して別ファイルにする。

import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component {
  render() {
    let name = "ken"
    return (
      <div>
        <h1>Welcome!!!!</h1>
        <h2>Welcome!!!!</h2>
        <p>{name} says</p>
        <p>{1+2}</p>
        <p>{this.get_result(2)}</p>
      </div>
    );
  }
  get_result(num) {
    return num * 100
  }
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

コンポーネント用のファイルを作成。

$ mkdir -p ./src/js/components
$ touch src/js/components/Layout.js

コマンドで書いたけど普通にFinderとかからベタっと作ってOK

コンポーネント用ファイルの中身を記述。

中身は、client.jsの中でコンポーネント化したいクラス部分をコピーし、他のコンポーネントから読み出せるようにexport defaultをつけたもの。

import React from "react";

export default class Layout extends React.Component {
  render() {
    let name = "ken"
    return (
      <div>
        <h1>Welcome!!!!</h1>
        <h2>Welcome!!!!</h2>
        <p>{name} says</p>
        <p>{1+2}</p>
        <p>{this.get_result(2)}</p>
      </div>
    );
  }
  get_result(num) {
    return num * 100
  }
}

コンポーネント読み込みファイル

読み込み側を元ファイルから以下のように変更。

class部分を切り出したのでまるごと削除し、importにてclassを読み込んでいる。

import React from "react";
import ReactDOM from "react-dom";
import Layout from "./components/Layout";

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

Layoutクラスの実体はLayout.jsに記述されているが、importしたことによりこのjsファイル中でも呼び出すことができる。

ヘッダ、ボディ、フッタでコンポーネントを分けてみる

import React from "react";

export default class Layout extends React.Component {
  render() {
    return (
      <header>
          <h1>ヘッダー</h1>
      </header>
    );
  }
}
import React from "react";

export default class Layout extends React.Component {
  render() {
    return (
      <article>
          <h2>ボディ</h2>
      </article>
    );
  }
}
import React from "react";

export default class Layout extends React.Component {
  render() {
    return (
      <footer>
          <p>フッター</p>
      </footer>
    );
  }
}

それらをLayout.jsでコンポーネントとして読み込む。

この場合のコンポーネントファイルへのパスはLayout.js(読み込むファイル)の場所からの相対。

import React from "react";
import Header from "./Header";
import Body from "./Body";
import Footer from "./Footer";

export default class Layout extends React.Component {
  render() {
    let name = "ken"
    return (
      <article>
          <Header />
          <Body />
          <Footer />
      </article>
    );
  }
}

そうすると、以下のようにindex.htmlにレンダリングして表示される。

<div id="app">
    <article>
        <header><h1>ヘッダー</h1></header>
        <article><h2>ボディ</h2></article>
        <footer><p>フッター</p></footer>
    </article>
</div>