Next.js vs Gatsby vs create-react-app

Next.js或Gatsby?為什麼要選擇它們而不是create-react-app?而你又應該選擇哪一個呢? create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切(包括SEO、速度等等),只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼? 它們都可以幫助實現伺服器端渲染,但方式不同。 使用Gatsby的結果是一個靜態網站生成器,沒有伺服器。您可以構建網站,然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端,可以根據請求生成伺服器端渲染的響應,讓您可以創建動態網站,這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站,但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站,我可能很難選擇,也許Gatsby擁有更好的插件生態系統,包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL,您可能會根據自己的觀點和需求喜歡或不喜歡這一點。

使用 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 ....

創建 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 存儲庫。...

如何在本地主機上配置React應用程序的HTTPS

如果您使用create-react-app建立應用程序並在本地計算機上運行它,則默認情況下它將使用HTTP協議進行服務。 任何在生產環境運行的應用程序都將使用HTTPS,它是HTTP的安全版本。 在大多數情況下,您將輕而易舉地獲得HTTPS,特別是如果您使用像Netlify或Vercel這樣的現代平台來提供應用程序的話。 但是在本地環境中,情況會比我們希望的要複雜一些。 讓我們看看您可以如何實現這一點! 正如您所知,create-react-app應用程序是通過npm run start或簡單地通過npm start運行的,因為在package.json文件的scripts部分中,我們有這一行: "start": "react-scripts start" 將其更改為: "start": "HTTPS=true react-scripts start" 這將HTTPS環境變量設置為true值。 但這還不夠。 現在,我們還需要生成一個本地證書。這一步對於任何應用程序都是有效的,不僅僅限於create-react-app應用程序,但我將在本文中包含它作為參考。 注意:我在macOS上運行這些命令。Linux應該是同樣的。我對Windows不提供保證。 在項目的根文件夾中運行: openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 然後運行: openssl rsa -in keytmp.pem -out key.pem 現在,您應該在文件夾中看到cert.pem和key.pem文件。 現在將package.json文件中的start腳本更改為: "start": "export HTTPS=true&&SSL\_CRT\_FILE=cert.pem&&SSL\_KEY\_FILE=key.pem react-scripts start", 如果您運行npm run start,並訪問https://localhost:3000(或您的應用程序使用的端口,如果不同-在我的情況下是3008),您應該會看到此警告消息: 要在macOS上解決此問題,請按照我的教程如何在macOS上安裝本地證書的說明進行操作。 一旦您這樣做了,您就可以正常查看使用SSL提供的應用程序了:

如何將React應用連接到相同源的後端

如何從同一個源中提供React應用和後端應用,而無需在服務器上使用CORS並擔心端口的問題。 我認為最常用的啟動React應用的方式是使用create-react-app命令,這非常方便。 你可能會遇到的問題之一是如何將React應用與您已經擁有的後端應用程式或您可能想要創建的後端應用程式連接起來。 開發過程中 在開發應用程序時,您希望利用熱加載和其他便利的功能。那麼如何在不使用CORS並擔心端口的情況下將其與後端結合起來呢? 本文將以Express框架提供示例,但這個方法也適用於其他框架。 假設您正在進行測試,那麼讓我們創建一個React應用: npx create-react-app testing 然後 cd testing 現在,在server.js文件中創建一個簡單的Express服務器,您可以將其添加到任何位置,甚至可以是一個單獨的文件夾。 如果您選擇將此文件添加到create-react-app應用程式代碼中,請運行: npm install express 然後,添加以下簡單的Express設置: const express = require('express'); const app = express(); app.get('/hey', (req, res) => res.send('ho!')) app.listen(8080) 關鍵點:打開package.json文件,並將以下代碼添加到其中的某個位置: "proxy": "http://localhost:8080" 這告訴React將API請求代理到使用Express構建的Node.js服務器。 現在使用node server.js運行此Node.js進程。在另一個窗口中,使用npm start啟動CRA應用。 當瀏覽器在端口3000上打開時(默認情況下),在DevTools中執行以下代碼: fetch('/hey') 如果檢查網絡面板,您應該可以看到成功的響應以及ho!消息。 在生產環境中 在生產環境中,當您準備好部署時,您將運行npm run build來編譯React應用程序,並使用Express服務器來提供這些靜態文件。 整個代理的設置在生產環境中是無用的(它也無法正常工作,它只用於開發)。因此,如果您認為方便,可以將其保留在package.json文件中。 在以下代碼中,我們使用了path內置的Node模塊,並告訴應用程序提供React應用的靜態編譯版本: const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'build'))) app.get('/ping', (req, res) => { return res.send('pong') }) app....

如何生成本地 SSL 證書

註:我在 macOS 上運行了這些命令。Linux 應該以相同的方式運行。我不能保證 Windows 的運行結果。 在專案的根目錄下運行以下命令: openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 現在運行以下命令: openssl rsa -in keytmp.pem -out key.pem 現在你應該在資料夾中有 cert.pem 和 key.pem 兩個文件。 使用 Express/Node.js,你可以使用以下代碼加載證書和私鑰: const fs = require('fs') const https = require('https') const app = express() app.get('/', (req, res) => { res.send('Hello HTTPS!') }) https.createServer({ key: fs.readFileSync('key.pem'), cert: fs.readFileSync('cert.pem') }, app).listen(3000, () => { console.log('Listening...') }) 如果你使用的是 create-react-app,請將 package.json 文件中的 start 腳本更改為:...

為什麼 useEffect 會運行兩次?

如何解決 useEffect 運行兩次的問題 React 18 於 2022 年 3 月發佈,改變了 useEffect() 的默認行為。 起初,我甚至沒有意識到這一點,這個改變被埋在了大量的新功能之中。 如果您的應用程式在升級到 React 18 後運作怪異,那是因為 useEffect 的默認行為變成運行兩次。 這只在開發模式下發生,但這是每個人構建應用程式的模式。 而且只在嚴格模式下發生,但這是使用 Vite、create-react-app 或 Next.js 構建的應用程式的默認模式。 造成這種情況有其原因。 這並不是您的程式碼有問題,而是 React 現在的運作方式。 唯一的解決辦法是禁用嚴格模式。 嚴格模式很重要,因此這只是一個臨時解決辦法,直到您修正了這個改變引入的任何問題。 在 Vite 中,請前往 src/main.jsx,從以下程式碼中刪除 <React.StrictMode> 包裝元件: import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode>, ) 改為: import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import '....