Reactの基礎学習(Propについて)

概要

Reactを勉強し始めたので、学習用＆記録用にまとめる(2)
前回はstateについてまとめた

学習に使用している本

早速実践

• 「Reactアプリを生成」「index.htmlを編集する」は前回と同じなので省略

1. index.jsを書き換える(srcディレクトリの直下)

• Test2に対して、watasuという属性を渡しています

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Test2 from './Test2';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
        <Test2 watasu='お渡しします' />
    </>
);

2. コンポーネントの作成

• index.jsから渡された「watasu」は、引数のpropsの中に入っている(propsは別の変数名にしてもOK)

Test2.js

export default function Test2(props) {
    
    return (
        <div>
            index.jsから受け取ったのは、「{props.watasu}」です。
        </div>
    )
}

3. コンポーネントの作成(別解)

• このようにしてもOK（引数部分が違う。{ }によって「分割代入」している）

Test2.js

export default function Test2({watasu}) {
    
    return (
        <div>
            index.jsから受け取ったのは、「{watasu}」です。
        </div>
    )
}

4. 実行！

$ cd {配置したいディレクトリ}/test
$ npm start

5. 結果