Reactのコンポーネント作成方法のまとめ

1. 関数を使用してコンポーネントを作成する

関数コンポーネント: JS 関数 (または矢印関数) を使用して作成されたコンポーネント

規則1: 関数名は大文字で始まる必要があります

規則2: 関数コンポーネントには、コンポーネントの構造を示す戻り値が必要です。

戻り値が null の場合、何もレンダリングされないことを意味します。

関数Hello() {
    戻る （
        <div>これは私の最初の機能コンポーネントです。 </div>
    ）
}
const Hello = () => <div> これは私の最初の関数コンポーネントです。 </div>

関数コンポーネントのレンダリング: 関数名をコンポーネントタグ名として使用します

コンポーネントラベルは単一または二重にすることができます

//1. reactをインポートする
'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。

/*
  機能コンポーネント:
*/
関数Hello() {
  戻る （
    <div>これは私の最初の機能コンポーネントです。 </div>
  ）
}

// レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root'))

2. クラスを使用してコンポーネントを作成する

コンポーネントクラス: ES6クラスを使用して作成されたコンポーネント

規則1: クラス名も大文字で始まる必要があります

規則2: クラスコンポーネントは、親クラスが提供するメソッドやプロパティを使用できるように、React.Component 親クラスを継承する必要があります。

規則3: クラスコンポーネントはrender()メソッドを提供する必要がある

規則4: render() メソッドには、コンポーネントの構造を示す戻り値が必要です。

//1. reactをインポートする
'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。

/*
  機能コンポーネント:
*/
関数Hello() {
  戻る （
    <div>これは私の最初の機能コンポーネントです。 </div>
  ）
}

// レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root'))

3. 独立したJSファイルに抽出する

1. Hello.jsを作成する

2. Hello.jsにReactをインポートする

3. コンポーネント（関数またはクラス）を作成する

4. Hello.jsでコンポーネントをエクスポートする

5. index.jsにHelloコンポーネントをインポートする

6. レンダリングコンポーネント

こんにちは

「react」からReactをインポートします。

//コンポーネントクラスHelloを作成し、React.Componentを拡張します。
    与える （） {
        戻る （
            <div>これは js ファイルに抽出された最初のコンポーネントです。 </div>
        ）
    }
}

//エクスポートコンポーネントエクスポートデフォルトHello

インデックス

//1. reactをインポートする
'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。

/*
  コンポーネントを個別の JS ファイルに抽出します。
*/

//Hello コンポーネントをインポートしますimport Hello from './Hello';

// レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root'))

これで、React コンポーネントを作成する 2 つの方法についての記事は終了です。React コンポーネントの作成方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: