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

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

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 上渲染元素我們將有一個父 div 元素在主 html 檔案中。此 div 可以稱為根。ReactDOM 管理 app div 內的所有內容。如果需要，我們可以在應用程式中新增多個這樣的隔離 div。要渲染元素，它將傳遞給 ReactDOM render 方法 - 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 ... 閱讀更多

換行符，我們表示為 。它用於換行。 的 ASCII 碼是 10，也稱為換行符 (LF)。現在，讓我們看看如何使用 RegExp 查詢換行符。RegExp 是一個物件，它指定用於對字串執行搜尋和替換操作或用於輸入驗證的模式。RegExp 在 ES1 中引入，並得到所有瀏覽器的完全支援 RegExp 元字元 在給定文字中查詢換行符的首次出現索引值。語法 ... 閱讀更多