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'));
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'));
Props (「プロパティ」の略) は、React 内でデータを 1 つのコンポーネントから別のコンポーネントに渡す方法です。これらは読み取り専用であり、さまざまな値を渡すことでコンポーネントをカスタマイズするのに役立ちます。
例) この例では、Greeting コンポーネントは name プロパティを受け取り、それを使用してパーソナライズされたメッセージを表示します。 Props は React の重要な概念であり、コンポーネントを動的に再利用できるようにします。
function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));
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') );
例) この例では、props.name にアクセスする代わりに、構造化を使用して props オブジェクトから名前を直接抽出し、コードをクリーンで読みやすくしています。
function Greeting({ name }) { return <h1>Hello, {name}!</h1>; } ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));
以上がデイ React エッセンシャル トレーニングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。