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

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

1. ReactDOM.render()
2. React.createElement()
3. React のプロップ
4. React でのリストへのアクセス
6. 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 を含めることが重要です。

例) この例では、ItemList は items の配列をプロップとして受け取り、配列内の項目ごとに 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 サイトの他の関連記事を参照してください。