讓我們看看如何建立一個簡單的 React 函式式元件。元件是 React 庫的構建塊。元件有兩種型別：有狀態元件和無狀態元件。有狀態元件具有一個可以內部操作的本地狀態物件。無狀態元件沒有本地狀態物件，但我們可以使用 React hook 在其中新增一些狀態。建立一個簡單的 ES6 函式：const player = () => { } 我們在這裡使用了 const 關鍵字作為函式名，這樣就不會意外地修改它。讓我們新增一個帶有 jsx 程式碼的 return 語句。const player = () => {    return (       我是 ... 閱讀更多

React 路由的一些基礎知識 React-router 是主要的庫，react-router-dom 和 react-router-native 是特定於環境的庫。React-router-dom 通常用於基於瀏覽器的 Web 應用程式。react-router-native 用於可以使用 react-native 開發的移動應用程式。要安裝它，請使用命令 npm install –save react-router-dom。在 Web 應用程式中，路由器有兩種型別：BrowserRouter 和 HashRouter。這兩種路由器型別的區別在於它們制定 URL 的方式。例如，http://hello.com/about => BrowserRouter 例如，http://hello.com/#/about => HashRouter（在其中使用雜湊）BrowserRouter 更受歡迎，它使用 html5 history API 來跟蹤位置。HashRouter 支援舊版... 閱讀更多

有多種方法可以將 Bootstrap 新增到 React 專案中。使用 Bootstrap CDN、安裝 Bootstrap 依賴項、使用 React Bootstrap 包。使用 Bootstrap CDN 這是新增 Bootstrap 的最簡單方法。像其他 CDN 一樣，我們可以在 React 專案的 index.html 中新增 Bootstrap CDN。下面是一個 React CDN url 如果我們需要 Bootstrap 的 JavaScript 元件，那麼我們應該在 index.html 中新增 jquery 和 popper.js。這樣完整的 index.html 將如下所示： React App hello             新增 Bootstrap 依賴項 npm install bootstrap ... 閱讀更多

我們使用 webpack 等工具捆綁 React 應用程式中的檔案。捆綁最終會按照匯入順序合併檔案並建立一個單個檔案。這種方法的問題是，隨著檔案數量的增加，捆綁檔案會變得越來越大。使用者可能不會使用所有功能元件，但捆綁包仍在載入它們，這可能會影響應用程式的載入。為了避免這種情況，在 React 中使用程式碼分割。示例 捆綁示例： // app.js import { total } from './math.js'; console.log(total(10, 20)); // 42 // math.js export function total(a, b) {    return a ... 閱讀更多

html 元素上的 aria-* 屬性在 React.js 中也受支援。其他屬性通常以駝峰式命名法編寫，但這些 aria-* 屬性以短橫線式命名法編寫。有時如果我們在 React.js 中使用父 div，我們會破壞 html 的語義。示例 render(){    return(                測試          ); } 如果與表格、列表等一起使用，Div 會導致語義問題。為了避免這種情況，我們可以使用 React 提供的片段，如下所示： import React, { Fragment } from ‘react’; function MessageList({ message }) {    return (       ... 閱讀更多

React 社群提供了一個關於如何以 React 的方式思考並構建大型、快速和可擴充套件應用程式的方向。React 已觸及多個平臺，並廣泛用作流行的 JavaScript UI 介面庫。步驟 1：建立簡單的模擬服務 如果我們需要進行伺服器呼叫並獲取資料。我們可以建立一個模擬服務來開始，並構建一個元件來獲取和顯示資料。在這裡，我們可以包含元件中 json 的處理以及預期結果的評估。步驟 2：將功能分解成更小的元件 React 最先建議的是建立... 閱讀更多

組合和繼承是將多個元件一起用於 React.js 的方法。這有助於程式碼重用。React 建議儘可能使用組合而不是繼承，並且只有在非常特殊的情況下才應使用繼承。示例以理解它： 假設我們有一個輸入使用者名稱元件。繼承 class UserNameForm extends React.Component {    render() {       return (                                       );    } } ReactDOM.render(    < UserNameForm />,    document.getElementById('root')); 這很簡單，只需輸入... 閱讀更多

通常需要在不同的元件之間共享狀態。在兩個元件之間共享狀態的常用方法是將狀態移動到這兩個元件的公共父級。這種方法在 React.js 中稱為向上提升狀態。使用共享狀態，狀態的變化會同時反映在相關元件中。這是共享狀態元件的單一事實來源。示例 我們有一個包含 PlayerContent 和 PlayerDetails 元件的 App 元件。PlayerContent 顯示播放器名稱按鈕。PlayerDetails 一行顯示詳細資訊。App 元件包含這兩個元件的狀態。選定的... 閱讀更多

在受控元件中，表單資料由 React 元件透過編寫事件處理程式來更新狀態進行處理。但在非受控元件中，表單資料由 DOM 本身處理。ref 用於從 DOM 接收表單值。示例 class UserNameForm extends React.Component {    constructor(props) {       super(props);       this.handleFormSubmit = this.handleFormSubmit.bind(this);       this.inputUserName = React.createRef();    }    handleFormSubmit(event) {       console.log('username: ' + this.inputUserName.current.value);       event.preventDefault();    }    render() {       return (                           ... 閱讀更多

在簡單的 html 表單中，表單元素會在內部保留值，並在提交表單按鈕提交時提交。示例表單示例           使用者名稱：               在上面的示例中，我們有一個名為使用者名稱的簡單輸入，我們可以在表單提交時接收它的值。html 表單的預設行為是導航到新頁面，即提交表單後的頁面。但是，如果我們有一個表單提交處理程式 JavaScript 函式，它可以驗證表單資料作為... 閱讀更多