在 React 中在 UI 上顯示列表Map 是 JavaScript 函式，它將為提供的陣列返回一個新陣列，如下所示 -const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);在 React 中構建列表類似於使用 map 函式。我們不是隻返回平方數，而是將返回一個帶有平方值的列表元素。const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) =>    {number*number} );使用 ui 標籤在螢幕上渲染 -ReactDOM.render(    { squaredNumbersList },    document.getElementById('root') );當 ... 閱讀更多

可以使用條件語句來渲染和移除特定的元件。條件處理在 JavaScript 和 React.js 中的工作方式類似示例function DisplayUserMessage( props ){    const user = props.user.type;    if(type==’Player’){       return Player ;    }    If( type==’Admin’){       Return Admin ;    } }在上面的示例中使用了 if 語句。使用者的型別決定了要返回哪個訊息。元件的本地狀態對於確定條件渲染很有用，因為狀態可以在元件內部靈活地更改。帶有邏輯 && 運算子的內聯 iffunction MessageSizeChecker(props) {    const message = props.message;    return (       ... 閱讀更多

編寫事件時存在一些語法差異，但其處理方式與 DOM 元素事件處理類似。事件處理程式的名稱使用駝峰式命名法編寫。示例在簡單的 html 中的事件 -    新增使用者在 React 中使用 jsx 的事件：    新增使用者其中一個區別是我們不會編寫 return false 來阻止 React 中的預設行為。我們改為專門編寫 event.preventDefault()示例在簡單的 Html 中 -    新增使用者在 React 中，它將被寫成 -function addUser(event){    event.preventDefault();    console.log(‘Add user event clicked’); }    新增使用者這裡傳遞的事件 ... 閱讀更多

元件的狀態和生命週期對於使動態應用程式正常工作非常強大。狀態狀態通常用於有狀態元件。隨著 Hook 的引入，我們現在也可以在函式元件中新增狀態。Hook 的名稱是 useState。狀態是一個 JavaScript 物件，可以透過使用者操作更改，併為 UI 新增動態性。使用狀態從伺服器更新資料是一種常見的用例。狀態和 props 之間的區別 -正如我們所知，props 是一個 JavaScript 物件屬性，它儲存作為屬性傳遞給元件的資訊。Props 值是 ... 閱讀更多

React 應用程式由元件組成。元件通常使用 React 元素。元件可以是獨立的、可重用的部分。元件有兩種型別 -無狀態元件（基本上是 JavaScript 函式）有狀態元件（使用 JavaScript 類特性）這兩種元件型別都接收一個屬性物件，通常稱為 props。無狀態元件在函式中有一個 return 語句，而有狀態元件有一個 render 方法，它返回 React 元素。要在頁面上顯示的簡單 React 元素是 -const message=Hello; ReactDOM.render( message, document.getElementById(‘root’) );它在螢幕上顯示 Hello 訊息。建立函式元件 -function Message(props){    return (       ... 閱讀更多

React 應用程式最小的構建塊是元素。元素的示例是 -const message = Welcome, Steve;React DOM 使用轉換後的 React 元素更新實際的 DOM。React 元件由元素組成。在 DOM 上渲染元素我們將為主 html 檔案中的一個父 div 元素。這個 div 可以稱為根。ReactDOM 管理 app div 內的所有內容。如果需要，我們可以在應用程式中新增多個這樣的隔離 div。要渲染元素，它將被傳遞給 ReactDOM 渲染方法 -const message = Welcome, Steve; ReactDOM.render(message, document.getElementById('app'));這將 ... 閱讀更多

JSX 就像一種具有 JavaScript 功能的模板語言。它有助於建立 React 元素。它是 JavaScript 的擴充套件，用於包含 UI 元素。示例let message = Hello World ;h1 標籤是已知的 html 標籤，但使用 jsx，我們建立了一個包含 h1 標籤和 hello world 訊息的變數。JSX 的實用性雖然使用 jsx 建立 React 元素不是強制性的。但它在視覺上更具吸引力，並有助於以簡單的方式理解程式碼。React 採用將 UI 邏輯和渲染邏輯保持在一起的概念。我們可以為關注點分離構建不同的鬆散耦合元件表示式 ... 閱讀更多

create-react-app 是一個使用預設配置建立 React.js 專案的命令。Create-react-app 將有助於執行 React 應用程式。命令將在 npm 或 yarn 上執行如果計算機上安裝了 npm 和 node.js，請使用以下命令全域性安裝 create-react-app -npm install –g create-react-app專案的建立 - 要在執行上述命令後建立專案，請執行以下命令 -npx create-react-app hello-world-examplenpx 附帶 npm 5.2+ 版本，可以在終端使用 npm –version 檢查 npm 版本如果 npm 版本為 5.2+，則可以使用以下命令直接建立 react.js 專案 -npx create-react-app hello-world-example如果 npm 版本為 6+，npm init react-app ... 閱讀更多