讓我們看看如何建立簡單的 React 函式元件元件是 React 庫的構建塊。元件有兩種型別。有狀態元件無狀態元件有狀態元件具有可以內部操作的本地狀態物件。無狀態元件沒有本地狀態物件，但我們可以在其中使用 React hooks 新增一些狀態。建立簡單的 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-domWeb 應用程式有兩種型別的路由器。BrowserRouterHashRouter兩種路由器型別之間的區別體現在它們構建 URL 的方式上。例如 http://hello.com/about => BrowserRouter例如 http://hello.com/#/about => HashRouter（在其中使用雜湊）BrowserRouter 更受歡迎，它使用 html5 歷史記錄 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 的語義示例渲染(){    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 表單中，表單元素內部保留值並在表單提交按鈕上提交。表單示例示例           使用者名稱：               在上面的示例中，我們有一個名為 usernam 的簡單輸入，我們可以在表單提交時接收它的值。html 表單的預設行為是導航到新頁面，即表單提交後的頁面。但是，如果我們有一個表單提交處理程式 JavaScript 函式，它可以驗證表單資料，則它可以提供更多優勢 ... 閱讀更多