コンポーネントを反応させる

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

コンポーネントを反応させる

コンポーネントは、独立した再利用可能なコードビットです。これらはJavaScript関数と同じ目的を果たしますが、単独で機能し、HTMLを返します。

コンポーネントには、クラスコンポーネントと関数コンポーネントの2つのタイプがあります。このチュートリアルでは、関数コンポーネントに焦点を当てます。

最初のコンポーネントを作成する

Reactコンポーネントを作成する場合、コンポーネントの名前は大文字で始める必要があります。

クラスコンポーネント

クラスコンポーネントにはextends React.Componentステートメントを含める必要があります。このステートメントは、React.Componentへの継承を作成し、コンポーネントにReact.Componentの関数へのアクセスを許可します。

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

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

機能コンポーネント

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

関数コンポーネントもHTMLを返し、クラスコンポーネントとほぼ同じように動作しますが、関数コンポーネントははるかに少ないコードを使用して記述でき、理解しやすく、このチュートリアルで推奨されます。

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

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

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

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

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

小道具

コンポーネントpropsは、プロパティを表すとして渡すことができます。

小道具は関数の引数のようなものであり、属性としてコンポーネントに送信します。

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

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

コンポーネント内のコンポーネント

他のコンポーネント内のコンポーネントを参照できます。

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

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

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

ファイル内のコンポーネント

Reactはコードを再利用することであり、コンポーネントを別々のファイルに分割することをお勧めします。

これを行うには、ファイル拡張子を付けて新しいファイルを作成し、その.js 中にコードを配置します。

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

export default Car;

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

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

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

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}