在 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 管理應用程式 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 ... 閱讀更多