【React】コンポーネントの基本と使い方を初心者向けに解説！

Reactでよく出てくるコンポーネントって何？

コンポーネントはReactを使う上で大切な概念になるよ！
基本と使い方をしっかりと解説していくね！

コンポーネントとは？

独立した再利用できる部品に分割して、UIの一部分となるビュー（View）を切り出したものをコンポーネントと言います。

コンポーネントはJavaScriptの関数に近いです。

入力されたものを受け取り、画面上に表示する内容をReact要素として返します。

関数コンポーネントとクラスコンポーネント

コンポーネントには関数コンポーネントとクラスコンポーネントの2つがあるよ！

どちらのコンポーネントにも一長一短はありますが、関数コンポーネントの方が新しく、主流になてきているものなので、関数コンポーネントをおすすめします。

関数コンポーネント

JSの関数のように定義するコンポーネントを関数コンポーネントと言います。

「const」で定義した定数にコンポーネントを入れています。
定数名が関数コンポーネントの名前になります。

関数の記述にはJSのアロー関数式を使っています。

import React from 'react';

const FunctionalComponent = () => {
  return <h1>Hello React</h1>;
};

アロー関数式とは？

今回は簡潔に記述できるアロー関数式というもので解説しているよ！
従来の関数との違いを解説するね！

従来のfunctionを使った関数式の簡潔な代替構文としてアロー関数式というものがあります。

ES2015から新たに加わったもので、今回はこちらのアロー関数式で解説をしています。

違いが分かるように従来の関数式との比較を簡単に解説します。

function関数式

function (a, b) {
  return a + b;
}

アロー関数式

(a, b) => {
  return a + b;
};

クラスコンポーネント

「class」と「extends」を使ったコンポーネントをクラスコンポーネントと言います。

クラス名を付けてとextendsにReact.Componentを継承することでクラスコンポーネントとなります。

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

関数コンポーネントとクラスコンポーネントの2つはどちらも同じ結果になるよ。

どちらも同じなら関数コンポーネントの方が
スッキリしていて見やすいね！

importの書き方

コンポーネントで使う外部機能や外部ファイルを読み込む方法について解説するね！

Reactでライブラリを読み込んだり、CSSを読み込んだり、コンポーネントを読み込んだりするときは「import」を使います。

読み込む内容によって記述が少し異なります。以下を参考にしてみてください。

// 決まり文句的な宣言
import React from 'react';

// CSSの読み込み
import './SampleApp.css';

// コンポーネントの読み込み
import { SampleForm } from './SampleForm';
import { SampleList } from './SampleList';

// コンポーネントに定義されている機能の読み込み
import { AccountContext } from '../../App'

コンポーネントの書き方

「SampleApp」というコンポーネント例に書き方を解説するよ！

コンポーネントが返す内容は「return」の中に記述します。
returnは1つの要素しか返すことができないので、同じ階層に複数の要素を記述することはできません。注意しましょう。

return(
  <div>
     ...
  </div>
)

return(
  <div>
     ...
  </div>
  <div>
     ...
  </div>
)

コンポーネント内には関数を定義することができます。
定義した関数は「retrun」の中で呼び出して使うことができます。

importしてきたコンポーネントは「<コンポーネント名 />」で呼び出すことができます。

//他のコンポーネントでinportできるようにexportする
export const SampleApp = () => {
  // OnClick処理などJS処理を記述
  const SampleFunction = () => {
    ...
  };

  // コンポーネントとして返す要素
  return (
    <div className="sample-style">
      // importしたコンポーネントの呼び出し
      <SampleForm />
      <SampleList />
    </div>
  );
};

コンポーネントの基本的な書き方のイメージできたよ！

コンポーネント名の頭文字は大文字にしよう

コンポーネントの名前を付けるときに注意してほしいことがあるよ！

Reactでは頭文字が小文字で始まるコンポーネントをHTMLのタグと認識します。

頭文字が大文字で始まるものをコンポーネントとして認識するので小文字で始めないように注意しましょう。

例えば、<div />」 は HTMLのdivタグを表しますが、<Div />はコンポーネントを表すことになります。

コンポーネントでprops（引数）を使う

コンポーネントも関数と同じように引数を使うことができるよ。

propsとは？

親コンポーネントから子コンポーネントに渡されてきた任意の入力を受け取ったものです。

コンポーネントの引数は「props」と呼ばれています。

propsの使い方

一番シンプルな方法はpropsという引数を設定してobject型でデータを受け取る方法です。

分かりやすいようにpropsという名前にしているだけで、名前は自由に付けることができます。

export const SampleApp = (props) => {
  ...

  return (
    <div className="sample-style">
      { props.data1 }
      { props.data2 }
      { props.data3 }
    </div>
  );
}

詳しい引数の使い方はこちらの記事にまとめています。

詳しくはこちら

【React】コンポーネントの引数の書き方を総まとめ！

propsの注意点

関数コンポーネントやクラスコンポーネントに関わらず、設定されているpropsは絶対に変更してはいけません。

propsは読み取り専用のものだと覚えておきましょう。

この関数は入力値を変更しないで、入力値に対する結果を返すから、
 「純粋（pure）」であると言い、純関数と言われるよ。

function sum(a, b, c) {
  return a + b + c;
}

反対に、この関数は入力値を変更しているため純関数ではないよ。

function sum(a, b, c) {
  a = b + c
}

このように全てのコンポーネントは、自身のpropsに対して純関数としなければいけません。

propsを使うときは注意しながら使うね！

まとめ

コンポーネントについてまとめるね！

コンポーネントを作ってみたくなった！
あとで作ってみよっと！