React高階元件

了解什麼是高階元件,以及在開發React應用程式時它們的用途。 你可能對JavaScript中的高階函式已經很熟悉了。這是指接受函式作為參數和/或回傳函式的函式。 兩個範例是Array.map()和Array.filter()。 在React中,我們將此概念擴展到元件,因此我們有了高階元件(HOC),當元件接受元件作為輸入並將元件作為輸出時。 一般來說,高階元件可以讓你創建可組合和可重用的程式碼,並提供更好的封裝性。 我們可以使用高階元件來向元件的狀態或屬性添加方法或屬性,例如Redux儲存。 當你想要增強現有元件、操作狀態或屬性,或者操作它的渲染標記時,你可能會想要使用高階元件。 通常,在高階元件前面加上with字串是一個常見的慣例(這只是一個慣例,並不是強制性的),所以如果你有一個Button元件,它的高階元件對應名稱應該叫作withButton。 讓我們創建一個高階元件。 最簡單的高階元件範例就是不做任何改變地返回元件: const withElement = Element => () => <Element /> 讓我們增加點有用性,將一個額外的屬性(顏色)加到此元素上,除了它原本就有的所有屬性: const withColor = Element => props => <Element {...props} color="red" /> 然後,在元件的JSX中使用這個高階元件: const Button = () => { return <button>test</button> } const ColoredButton = withColor(Button) 最後,在我們應用程式的JSX中渲染包裝後的按鈕元件: function App() { return ( <div className="App"> <h1>Hello</h1> <ColoredButton /> </div> ) } 雖然這只是一個非常簡單的範例,但希望你能掌握高階元件的概念,並將這些概念應用於更複雜的情境中。

VS Code 設定 React 開發環境

這篇文章將解釋如何設定一個讓 React 開發容易且簡潔的 VS Code 環境,並且擁有程式碼檢查的提示和保存時自動格式化的功能。 ESLint 首先,我們將安裝 ESLint。ESLint 是一個非常棒的工具,可以幫助您保持程式碼整潔並符合規範。 使用 ESLint 延伸套件 安裝 ESLint 到 VS Code 的擴充套件商店。 然後,在終端機中執行以下 Yarn 命令(如果尚未安裝 Yarn,請參考我的教學鏈接獲取簡短的指南): yarn add babel-eslint yarn add eslint-config-airbnb yarn add eslint-plugin-jsx-a11y yarn add eslint-plugin-react 接下來,在專案的根目錄中建立一個 .eslintrc.json 檔案,並添加以下內容以設定適用於 React 開發的基本 ESLint 配置,包括 JSX 支援: { "parser": "babel-eslint", "extends": "airbnb", "plugins": ["react", "jsx-a11y", "import"] } Prettier 接下來,我們建議安裝 Prettier。Prettier 是一個 JavaScript 的文風一致性格式化工具。它是一個很棒的工具,可以幫助您統一程式碼風格,即使只有您獨自開發也非常有用。在團隊合作中,它更是非常有用,可以避免程式碼風格的差異。請按照 Prettier 建議的方式來使用。 您可以使用 Prettier 的 VS Code 擴充套件 來安裝 Prettier,使用 npm 命令:...

一個 React 簡單應用的例子:通過 API 獲取 GitHub 用戶信息

這是一個非常簡單的例子,展示了一個表單接受GitHub用戶名稱,一旦接收到submit事件,它將向 GitHub API 請求該用戶的信息並打印。 這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時,這個名稱被綁定到它的狀態中。 當按下Add card時,清除Form組件的userName狀態,以清除輸入表單。 除了 React,該示例還使用了Axios庫。這是一個很好的輕量級庫,用於處理網絡請求。可在 CodePen 中的設置中添加它,或者使用npm install axios在本地安裝它。 輸出: 代碼: 首先創建 Card 組件,這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據,使用: props.avatar_url 用戶頭像 props.name 用戶名稱 props.blog 用戶個人網站的URL const Card = props => { return ( <div style={{ margin: '1em' }}> <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} /> <div> <div style={{ fontWeight: 'bold' }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) } 我們創建了一個 Card 組件的列表,它將作為父組件中的 cards 屬性傳遞給 CardList ,使用 map() 函數遍歷它並輸出一個卡片列表: const CardList = props => ( <div> {props....

使用 Electron 和 React 創建應用程式

使用 create-react-app 建立 Electron Node.js 桌面應用程式的方法 2021 更新: 我強烈建議使用 electron-react-boilerplate 取代本文所述的方法 如果尚未安裝 Node.js,請先安裝 轉到開發資料夾 建立 React 應用程式 加入 Electron 安裝 foreman 以允許從命令列執行應用程式 安裝 create-react-app 的相依性 配置 eslint 配置完成! 啟動 感謝 當我在 2015 年首次使用 Electron 時,它還不清楚它在現代應用程式中如此普及,而且我對其所導致的應用程式大小感到震驚。 但是,我們可以清楚地知道 Electron 已經成為必不可少的工具,並且你的應用程式不需要讓人感到遲鈍和消耗大量記憶體,就像VS Code每天向我展示的那樣(在一部不是非常快的機器上)。 所以,這裡有一個快速入門指南,使用 create-react-app 創建一個React應用程式,並預先整合了 ESlint。 如果尚未安裝 Node.js, 請先安裝 在 macOS 上: brew install node 轉到開發資料夾 cd ~/dev 建立 React 應用程式 npx create-react-app app cd app 加入 Electron npm install electron npm install --save-dev electron-builder 安裝 foreman 以允許從命令列執行應用程式 npm install foreman -g 安裝 create-react-app 的相依性 npm install 配置 eslint ....

使用 Gatsby 加載外部 JS 檔案

在現代 JavaScript 網頁開發工作流中,通常會使用 npm 套件來安裝 JavaScript。然而,有時我們需要包含一個外部的 JavaScript 檔案,而現代的工具可能會讓這件事變得有些困難。 特別是在我的網站中需要包含來自 Wistia 的視頻時,經過快速查看後,一切看起來比我想像的要複雜得多。Wistia 給了我這個 HTML 片段來嵌入視頻: <script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia\_responsive\_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia\_responsive\_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia\_embed wistia\_async\_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia\_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div> 在一個「正常」的 HTML 網站中,比如我通常使用 Hugo 構建的網站,這是非常簡單的。我只需要將這段程式碼添加到我的頁面中即可。 但是在一個 Gatsby 頁面中,這是一個 React 組件,該怎麼做呢? 我查看了一些插件,但沒有一個真正符合我的需求。解決方案可能有些「hacky」,但效果非常好,而且我仍然覺得對發生的事情有掌控權。 我將 HTML 片段轉換成了 JSX,並正確地轉換了所有的 HTML 屬性:class -> className,aria-hidden -> ariaHidden,以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。 然後,我將這段程式碼添加到 gatsby-browser.js 檔案中,在頁面加載時加入我需要的腳本: const addScript = url => { const script = document....

使用 Vite 創建新的 React 應用程式

當我需要創建React應用程式並需要後端時,我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能,它非常受歡迎,遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式,也許是為了進行演示或開始一個專案,而不需要 Next.js 提供的所有內容。 我不想擔心這些,我只想自由地進行 React 實驗。 我過去使用過 create-react-app,但現在我使用 Vite。 Vite 是一個現代化的工具,提供了開發伺服器,速度非常快,許多 JavaScript 社群的人認為它是最佳選擇。 此外,它並不是一個特定於 React 的工具,因此你學到的任何東西都可以應用到其他支援的框架,例如Svelte、Vue等。 要使用 Vite 創建一個項目,首先進入你存放所有專案的文件夾,例如我個人的案例中是在用戶的主文件夾中的 dev 文件夾下。 然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)。 為項目選擇一個名稱,該名稱也將是項目的文件夾名稱。在這個案例中,我選擇 “test”: 現在可以選擇一個框架,選擇 “React”。 然後選擇 JavaScript 或 TypeScript,依照個人喜好選擇。你也可以選擇使用 SWC。 完成! 現在進入新建立的專案資料夾: cd test 運行以下指令安裝相依套件: npm install 然後運行以下指令開始應用程式: npm run dev 應用程式應該會在 http://localhost:5173 運行(如果該埠口已被使用,則可能會不同)。 現在你已經準備好在此應用程式上工作了! 以下是在 VS Code 中打開的應用程式資料夾。 你可以看到,Vite 已經創建了一個基本的應用程式,現在你可以打開 src/App.jsx 開始在其中進行開發工作。 這樣的工具之美在於,現在你可以新增文件,Vite 會自動識別它們,而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev。...

使用jQuery還是React?

總結一下,這要視情況而定! 首先,你可能根本不需要使用jQuery,只需要使用Web平台的API就可以了,但這是另一個話題。 現在讓我們來專注於這個問題。你應該使用jQuery還是React呢? 我的回答是這樣的。如果你正在構建單頁應用程序(SPA),React是明顯的選擇。React就是為此而建立的,它會負責生成視圖並在頁面上渲染元素,而不需要你考慮DOM(也就是如何在頁面上呈現內容的細節)。 React採用聲明式的方法,使用它你可以在更高的層次上工作。 在構建SPA時,不應該使用jQuery(或者本地瀏覽器API),因為事情可能很快變得復雜。 它最適合用於向可能是服務器呈現的頁面添加交互模塊,雖然它也可以與React應用程序共存。 使用jQuery,你直接與DOM交互以選擇元素,使用選擇器在頁面上找到要操作的元素。 它在更低的層次上操作,並且在應用程序增長的過程中容易出現問題。

修復“物件無法用作 React 子元素”的錯誤

我在一個 React(Next.js)應用程式中遇到了這個錯誤: 錯誤:物件無法用作 React 子元素(找到:[object Promise])。 如果您要渲染一個子元素集合,請改用陣列。 在花了一些時間嘗試弄清楚錯誤是什麼意思後,我發現原來是因為我將頁面組件導出為 async,這是因為我從另一個使用 app 資料夾的 Next.js 專案中複製的。在 app 資料夾中可以這麼做,但在 pages 資料夾中不行。 刪除 async 後問題解決了: export default function Page() { }

修復無法顯示的錯誤:物件無法作為 React 的子項

這個錯誤可能是因為你有一個 React 组件,並在 JSX 中渲染了一個 prop,像是這樣的,但在初始化組件參數時忘記對 prop 解構: function MyComponent(test) { return <p>{test}</p> } 你應該這樣做: function MyComponent({ test }) { return <p>{test}</p> } 這個組件接收到一個 props 物件,我們通常使用物件解構將 props “映射” 到變數上,就像我們的範例中的 {test} 那樣。

創建 create-react-app 的介紹

create-react-app 是開始使用 React 應用的最簡單方法。 create-react-app 是一個旨在讓您快速掌握 React 的項目。它提供了一個現成的 React 應用程序起始器,讓您可以開始構建應用程序,而不必處理 Webpack 和 Babel 的配置。 它提供了以下功能: 具有熱重載的開發服務器 集成了 Jest 的測試環境 构建 React 應用程序的能力 兼容 ES6+ 語法 打包所有 JavaScript 和資源文件 包含 CSS 自動添加器、SASS 和 CSS Modules 支持 等等! 您可以通過使用 npx 開始使用,這是一種在不安裝命令的情況下下載和執行 Node.js 命令的簡單方法。npx 隨 npm 一起提供(自版本 5.2 起)。如果您尚未安裝 npm,請從 https://nodejs.org 安裝(npm 會隨 Node 一同安裝)。 如果您不確定自己的版本,我建議您檢查是否需要更新。 提示:如果您對終端機不熟悉,請查看我的終端機教程 https://flaviocopes.com/macos-terminal/。 當您運行 npx create-react-app <app-name> 時,npx 將下載最新的 create-react-app 版本,並運行它,然後將其從您的系統中刪除。這非常好,因為您的系統上永遠不會有過時的版本,每次運行該命令時,您都會獲得最新和最好的代碼。 讓我們開始: npx create-react-app todolist 執行完畢時的截圖: 這是執行完成後的截圖: create-react-app 在您指定的文件夾中(此例中為todolist)創建了文件結構,並初始化了 Git 存儲庫。...