デイ React エッセンシャル トレーニング

WBOY
リリース: 2024-09-04 10:11:28
オリジナル
1074 人が閲覧しました

Day  React Essential Training

コンセプトのハイライト:

  1. ReactDOM.render()
  2. React.createElement()
  3. React のプロップ
  4. React でのリストへのアクセス
  5. React での構造化

1. ReactDOM.render()

React では、ReactDOM.render() 関数を使用して React 要素 (またはコンポーネント) を DOM にレンダリングします。この関数は 2 つの引数を取ります: レンダリングする React 要素と、それをレンダリングする DOM 要素です。

例) この例では、ReactDOM.render() は単純な「Hello, React!」をレンダリングします。 ID root を持つ DOM 要素にメッセージを追加します。これは、ほとんどの React アプリケーションでアプリを DOM にマウントするための基本構造です。

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React!</h1>;

ReactDOM.render(element, document.getElementById('root'));
ログイン後にコピー

2. React.createElement()

React.createElement() 関数は、React 要素を作成するもう 1 つの方法です。 JSX (上の例のように) は要素を作成する最も一般的な方法ですが、React.createElement() は JSX の背後にある基礎的なメカニズムであるため、それを理解することが重要です。

例) この例では、React.createElement() は「Hello, React!」という内容の h1 要素を作成します。最初の引数は要素のタイプ (この場合、h1)、2 番目の引数は props (ここでは、props がないため null)、3 番目の引数は子です。要素の内容。

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));
ログイン後にコピー

3. React のプロップ

Props (「プロパティ」の略) は、React 内でデータを 1 つのコンポーネントから別のコンポーネントに渡す方法です。これらは読み取り専用であり、さまざまな値を渡すことでコンポーネントをカスタマイズするのに役立ちます。

例) この例では、Greeting コンポーネントは name プロパティを受け取り、それを使用してパーソナライズされたメッセージを表示します。 Props は React の重要な概念であり、コンポーネントを動的に再利用できるようにします。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));
ログイン後にコピー

4. React でのリストへのアクセス

React でリストをレンダリングするときは、通常、配列にマッピングして、リスト内の各項目の要素を返します。 React がリストを効率的に更新および管理できるように、キー prop を含めることが重要です。

例) この例では、ItemListitems の配列をプロップとして受け取り、配列内の項目ごとに li 要素と一意の key.

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));
ログイン後にコピー
5.

は、React アプリケーションの潜在的な問題を特定するために開発モードで使用できるラッパー コンポーネントです。目に見える UI は表示されませんが、追加のチェックと警告が有効になります。

例) アプリケーション (またはその一部) を でラップすると、React はコードがベスト プラクティスに従っていることを確認するためにいくつかのチェックを実行し、問題を早期に発見するのに役立ちます。開発プロセス。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
ログイン後にコピー
6. React での分割

構造化は、配列の値やオブジェクトのプロパティを個別の変数に解凍できる JavaScript の機能です。 React では、プロパティをよりきれいに抽出するために機能コンポーネントでよく使用されます。

例) この例では、props.name にアクセスする代わりに、構造化を使用して props オブジェクトから名前を直接抽出し、コードをクリーンで読みやすくしています。

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));
ログイン後にコピー

以上がデイ React エッセンシャル トレーニングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!