日間反應基礎訓練

概念亮點：

1. ReactDOM.render()
2. React.createElement()
3. React 中的道具
4. 存取 React 中的清單
6. React 中的解構

1.ReactDOM.render()

在 React 中，ReactDOM.render() 函數用於將 React 元素（或元件）渲染到 DOM 中。此函數需要兩個參數：要渲染的 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 元素的另一種方法。雖然 JSX（如上面的範例）是創建元素的最常見方法，但理解 React.createElement() 很重要，因為它是 JSX 背後的底層機制。

例如） 在此範例中，React.createElement() 建立一個內容為「Hello, React!」的 h1 元素。第一個參數是元素的類型（在本例中為h1），第二個參數是props（此處為null，因為我們沒有props），第三個參數是孩子，即元素的內容。

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

Props（「屬性」的縮寫）是 React 中資料從一個元件傳遞到另一個元件的方式。它們是唯讀的，可以幫助您透過傳遞不同的值來自訂元件。

例如） 在此範例中，Greeting 元件接收 name 屬性並使用它來顯示個人化訊息。 Props 是 React 中的關鍵概念，它允許元件動態且可重複使用。

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

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

4. 在 React 中存取列表

在 React 中渲染清單時，通常會對應一個陣列並為清單中的每個項目傳回一個元素。包含一個關鍵 prop 來幫助 React 有效更新和管理清單非常重要。

例如） 在此範例中，ItemList 採用items 陣列為prop，並為陣列中的每個項目建立一個li 元素，具有唯一的鍵。

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。

例如） 在這個例子中，我們沒有存取 props.name，而是使用解構直接從 props 物件中提取名稱，使程式碼更乾淨、更易於閱讀。

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

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

以上是日間反應基礎訓練的詳細內容。更多資訊請關注PHP中文網其他相關文章！