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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactでコンポーネントを作成する方法
  • シングルトンコンポーネントを作成するためのReactメソッド
  • React でコンポーネントを作成する 3 つの方法とその違い
  • Reactのes6でコンポーネントthisを作成する方法の詳細な理解

<<:  セマンティック XHTML タグの紹介

>>:  VMware 仮想マシンで Linux の IP アドレスを表示する方法

推薦する

CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明

1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...

固定サイドバーを実現するためのJavaScript

固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...

MySQL データベースのマスター スレーブ分離のサンプル コード

導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...

HTMLおよびJSPページがキャッシュされ、Webサーバーから再取得されるのを防ぎます。

ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

MySQL InnoDBセカンダリインデックスのソート例の詳細な説明

ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

mysql インストーラ ウェブ コミュニティ 5.7.21.0.msi インストール グラフィック チュートリアル

この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

MySQL PXC クラスターの構築方法

目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...

CSSで背景ぼかしを設定する方法

ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

docker のインストールが完了し、bridge-nf-call-iptables が無効であると報告される問題を解決します

Centos マシンで docker のインストールが完了したら、docker info コマンドを...

HTML でランダムロールコーラーを実装するためのサンプルコード

この点呼装置は簡易版であり、自動停止の必要性を考慮していないため、点呼を開始した後、停止ボタンをクリ...

Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問

目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...