React Components

コンポーネントは、HTML要素を返す関数のようなものです。

コンポーネントは、独立した再利用可能なコードの断片です。

コンポーネントには、クラスコンポーネントとファンクションコンポーネントの2種類があり、このチュートリアルでは、クラスコンポーネントに焦点を当てます。

クラスコンポーネントの作成

Reactコンポーネントを作成する際、コンポーネントの名前は大文字で始めなければなりません。

コンポーネントは extends React.Component ステートメントを含む必要があります。このステートメントは React.Component への継承を作成し、あなたのコンポーネントが React.Component の機能にアクセスできるようにします。

コンポーネントは render() メソッドも必要で、このメソッドは HTML を返します。

例

Car

class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}

これであなたのReactアプリケーションには、<h2>要素を返すCarというコンポーネントができました。

このコンポーネントをアプリケーションで使用するには、通常のHTMLと同様の構文を使用します。<Car />

例

Carコンポーネントを「root」要素に表示します。

ReactDOM.render(<Car />, document.getElementById('root'));

Run Example “

Create a Function Component

ここでは、上記と同じ例を、代わりにFunctionコンポーネントを使用して作成しています。

FunctionコンポーネントもHTMLを返し、Classコンポーネントとほとんど同じように動作しますが、Classコンポーネントにはいくつかの追加機能があり、このチュートリアルではそれを使用します。

例

Car

function Car() { return <h2>Hi, I am also a Car!</h2>;}

再び、ReactアプリケーションにCarコンポーネントを作成します。

通常のHTMLのようにCarコンポーネントを参照してください（ただしReactでは、コンポーネントは大文字で始めなければなりません）：

例

「root」要素にCarコンポーネントを表示します。

ReactDOM.render(<Car />, document.getElementById('root'));

Run Example”

Component Constructor

コンポーネントにconstructor()関数がある場合、コンポーネントが開始されたときにこの関数が呼び出されます。

コンストラクタ関数は、コンポーネントのプロパティを開始する場所です。

Reactでは、コンポーネントのプロパティはstateというオブジェクトに保持する必要があります。

stateについては、このチュートリアルの後半で詳しく説明します。

コンストラクタ関数は、親コンポーネントのコンストラクタ関数を実行する super()React.Component)。

例

Carコンポーネントにコンストラクタ関数を作成し、colorプロパティを追加します：

render()関数でcolorプロパティを使用します。

Example

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Run Example”

Props

コンポーネントのプロパティを処理するもう一つの方法は、propsを使用することです。

プロップは関数の引数のようなもので、属性としてコンポーネントに送ります。

propsについては、次の章で詳しく説明します。

Example

Carコンポーネントに色を渡すために属性を使用し、render()関数で使用します:

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Run Example”

Components in Components

他のコンポーネントの中でコンポーネントを参照することができます。

Example

Garageコンポーネントの中にCarコンポーネントを使用します：

class Car extends React.Component { render() { return <h2>I am a Car!</h2>; }}class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); }}ReactDOM.render(<Garage />, document.getElementById('root'));

Run Example “

Components in Files

Reactはコードの再利用を目的としていますが、コンポーネントの一部を別のファイルに挿入するとスマートになります。

そのためには、.jsというファイル拡張子で新しいファイルを作成し、その中にコードを入れます。

ファイルは、（前と同様に）Reactをインポートすることで始まり、export default Car;という記述で終わらなければならないことに注意してください。

Example

これが新しいファイルで、「App.js」と名付けました。js」と名付けました。

import React from 'react';import ReactDOM from 'react-dom';class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}export default Car;

Carコンポーネントを使用するためには、このファイルをアプリケーションにインポートする必要があります。

Example

アプリケーションで「App.js」ファイルをインポートすると、あたかもここで作成されたかのようにCarコンポーネントを使用することができます。

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));

Run Example”

React Components (日本語)