【React入門④】コンポーネントを使って描画する

React.js

f:id:nekorokkekun:20190904143840p:plain:w1000
こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

コンポーネントとは？

コンポーネントにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。このページではコンポーネントという概念の導入を行います。
概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。
コンポーネントと props – React

個人的なコンポーネントへの解釈は「UIを構成するパーツ」です。

1つのページを1つのファイルで作成すると、後から再利用がしづらくなります。

そこでページ内の役割ごとにファイルを分けておくことで、
後から別のファイルで同じ役割が必要となった時にパーツだけを再利用できるというわけです。

f:id:nekorokkekun:20190904131530p:plain
https://www.edureka.co/blog/react-components/

コンポーネントの作成

それではReactの特徴の1つである「コンポーネント」の作成をしていきましょう。

まずはReact本体とReactDOMをインストールしましょう。

$ npm install --save react react-dom

Reactの読み込みは基本として、ReactDOMはDOMのレンダリングに必要なためインストールをしています。

実際にコンポーネントを描画してみる

それでは以下のようにファイルを書き換えてみましょう。

src/App.js

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

ReactDOM.render(
  <div>Laravelとねころっけくん5.8</div>,
  document.getElementById('root')
);

public/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Reactチュートリアル</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// エラーが出るため以下の1行をコメントアウト
// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ここまで書けたらターミナルから以下を入力しましょう。

$ npm start

画面を確認すると、先ほどApp.jsに記述したdiv要素が描画されているはずです。
f:id:nekorokkekun:20190904134623p:plain

ポイントとしては、

ここでrootというIdの要素に対して指定した

要素を描画（rendering）するという点です。

ReactDOM.render(
  <div>Laravelとねころっけくん5.8</div>,
  document.getElementById('root')
);

そして、描画される側では

<div id="root"></div>

というように描画する場所を教えてあげているわけです。


この組み合わせの基本が分かっていれば、コンポーネントを簡単に作ることができそうです！

コンポーネント内に子コンポーネントを配置する

コンポーネント内に他のコンポーネントを配置することもできます。

早速やってみましょう。

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello'; // 追記


ReactDOM.render(
  <Hello />, // 追記
  document.getElementById('root')
);

srcディレクトリに新たなcomponentsディレクトリを作成し、その中にhello.jsを作成しましょう。
src/components/hello.js

import React, { Component } from 'react';

class Hello extends Component {
    render() {
        return <div>Hello, world!</div>;
    }
}

export default Hello;

これで以下のように表示されたはずです。
f:id:nekorokkekun:20190904141436p:plain


ちなみに、hello.jsで使用されたrender関数ですが以下のような書き方もできます。

const Hello = () => {
        return <div>Hello, world!</div>;
}

const Hello = () => <div>Hello, world!</div>

function Hello() {
    return <div>Hello, world!</div>;
}

全て先ほどと同じ描画のされ方になりますので覚えておくといいかもしれません。