Reactのコンポーネントは関数とクラスがある
関数コンポーネント
データの入ったprops(プロパティの意)というオブジェクトを引数として受け取り、returnでReact要素を返す。
関数コンポーネント
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
クラスコンポーネント
コンストラクタを実装してsuper(props)の呼び出しが必要。render()メソッド内でコンストラクタで定義したpropsにアクセスして利用する。
クラスコンポーネント
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
コンポーネントのレンダー
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
- 要素を引数としてroot.render()を実行する
- ReactはWelcomeコンポーネントを呼び出し、そのときにpropsとして {name: 'Sara'} を渡す。
- Welcomeコンポーネントは出力としてh1要素を返す。
- ReactDOMは返されたh1要素に一致するようにDOMを書き換える。
コンポーネントを組み合わせる
コンポーネントは他のコンポーネントを参照することができる。これにより、コンポーネントの再利用が可能になる。(同じコンポーネントを複数利用すること)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}