デイ 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'));

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));