コンポーネントと props

コンポーネントにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。このページではコンポーネントという概念の導入を行います。詳細な API リファレンスはこちらで参照できます。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

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

コンポーネントを定義する最もシンプルな方法は JavaScript の関数を書くことです：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

この関数は、データの入った “props”（「プロパティ」の意味）というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを “関数コンポーネント (function component)” と呼びます。

コンポーネントを定義するために ES6 クラスも使用できます：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上記 2 つのコンポーネントは React の視点からは等価です。

関数コンポーネントとクラスコンポーネントには、次のセクションで説明するようにそれぞれ幾つかの追加機能があります。

コンポーネントのレンダー

前節では、DOM のタグを表す React 要素のみを扱いました：

const element = <div />;

しかし、要素はユーザ定義のコンポーネントを表すこともできます：

const element = <Welcome name="Sara" />;

React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。

例えば以下のコードではページ上に “Hello, Sara” を表示します：

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;root.render(element);

Try it on CodePen

この例で何が起こるのかおさらいしてみましょう。

1. <Welcome name="Sara" /> という要素を引数として root.render() を呼び出します。
2. React は Welcome コンポーネントを呼び出し、そのときに props として {name: 'Sara'} を渡します。
3. Welcome コンポーネントは出力として <h1>Hello, Sara</h1> 要素を返します。
4. React DOM は <h1>Hello, Sara</h1> に一致するよう、DOM を効率的に更新します。

補足: コンポーネント名は常に大文字で始めてください。

React は小文字で始まるコンポーネントを DOM タグとして扱います。例えば、<div /> は HTML の div タグを表しますが、<Welcome /> はコンポーネントを表しており、スコープ内に Welcome が存在する必要があります。

この規約の背後にある理由については JSX を深く理解するを参照してください。

コンポーネントを組み合わせる

コンポーネントは自身の出力の中で他のコンポーネントを参照できます。これにより、どの詳細度のレベルにおいても、コンポーネントという単一の抽象化を利用できます。ボタン、フォーム、ダイアログ、画面：React アプリでは、これらは共通してコンポーネントとして表現されます。

例えば、Welcome を何回もレンダーする App コンポーネントを作成できます：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

Try it on CodePen

典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。しかし、既存のアプリに React を統合する場合は、Button のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよいでしょう。

コンポーネントの抽出

コンポーネントをより小さなコンポーネントに分割することを恐れないでください。

例えば、この Comment コンポーネントについて考えましょう：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">