これまでの復習、コンポーネントを別ファイルにしてコールする（React基礎講座5）

はじめに

今回は、これまでの復習として、Reactのコンポーネントを他のファイルから定義させて、それを読み込みレンダリングさせるというような処理を書きたいと思います。

シリーズ

本記事はReact基礎講座のための連載になっています。気になる方のために、前の章は以下です。

React Component について（React基礎講座3） - Qiita

最初の記事は、以下です。

Reactを使ってJSXの内容をレンダリングする（create-react-app）（React基礎講座1） - Qiita

まずは基本形を書いて行きます

index.js

import React from "react";
import { render } from "react-dom";

render(<App />, document.getElementById("root"));

では、<App /> のコンポーネントの中身を書いて行きましょう。

引数は 名前 name と 職業 job を直接受け取れるようにしましょう。

呼び出す側では引数を渡すようにしましょう。

index.js

import React from "react";
import { render } from "react-dom";

const App = ({ name, job }) => (
  <div>
    {name} {job}
  </div>
);

render(<App name="ryosuketter" job="engineer" />, document.getElementById("root"));

これで、view側には、意図通りレンダリングされたと思います。

コンポーネントを別ファイル（component.js）で切り出す

index.js 同階層に component.js を作成して、コンポーネントを独立させましょう。

component.js

import React from "react";

export const App = ({ name, job }) => (
  <div>
    {name} {job}
  </div>
);

index.jsでは、Appコンポーネントを呼び出すだけにしましょう。

index.js

import React from "react";
import { render } from "react-dom";
import { App } from "./Component";

render(
  <App name="ryosuketter" job="engineer" />,
  document.getElementById("root")
);

これで同じ結果になったと思います。React はコンポーネントを別ファイルで切り出すことはよくあるので、この作業になれるといいと思います。

参考

• 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛