Home >> Blog >> 最新 react 教學

我們除了談論許多SEO搜尋引擎優化的內容之外,今天來談談react 教學。

最新 react 教學

所以你已經準備好深入學習 React,但你仍然有一些揮之不去的問題,例如:

  • 我應該如何創建我的 React 項目?
  • 我應該在我的 React 應用程式中添加哪些工具?
  • 在學習 React 之前我需要先學習 JavaScript 嗎?
  • 我應該在哪裡部署我的項目?

如果您正在尋找這些問題(以及更多)的答案,那麼這份簡單、全面的教學就是為您準備的。

它將為您提供開始學習和使用 React 所需的一切,而無需拼湊數十個過時的初學者教材。

讓我們開始吧!

我需要在我的電腦上安裝什麼?

要在您的電腦上構建完整的 React 項目,每個開發人員都需要一些基本工具:

  • Node / NPM(我推薦安裝“LTS”版本)
  • 一個好的程式碼編輯器(我推薦Visual Studio Code)
  • Git(在 Git-SCM.com 安裝它並在Github.com創建一個免費帳戶)

Node被定義為一個 JavaScript 運行時。當與NPM之類的包管理器(您在安裝 Node 的同時獲得)結合使用時,它可以作為一個強大的工具來輕鬆管理您的 React 項目中的庫。

如果沒有 Node 和 NPM,如果你想在你的 React 項目中添加一個新的 JavaScript 庫(比如day.js,一個用於格式化日期的庫),你需要手動添加一組< script>標籤並自己管理它們。

使用 Node 和 NPM(或其他包管理器,如 Yarn),我們可以簡單地運行一個命令來安裝我們喜歡的任何 JavaScript 庫。要安裝 day.js,我們將運行:

npm install dayjs

NPM 會自動抓取該庫的程式碼並將其添加到我們的node_modules文件夾中

注意:創建 React 項目不需要 Node / NPM。但它可以讓你使用有用的工具,比如Create React App和Next.js,讓管理你的 React 應用程式變得更加容易。

一個好的程式碼編輯器對於能夠:

  • 輕鬆管理我們 React 項目中的所有文件和文件夾
  • 提供語法高亮顯示程式碼樣式,使其更易於閱讀
  • 使用集成終端運行命令以開發、測試和構建我們的項目
  • 安裝擴展以提供其他有用的功能

Visual Studio Code(或VSCode)可以完成所有這些事情,並且除了完全免費之外,還為 React 開發提供了很好的默認設置。

最後,Git和GitHub對於保存您對 React 項目所做的更改至關重要。Git 為您提供了“版本控制”,這是一個工具的花哨名稱,它使您能夠保存程式碼並在必要時恢復過去的保存。

GitHub 也是必不可少的,因為它允許我們遠程保存所有程式碼,即在我們的 GitHub 帳戶上。您可以使用 Git 保存您的程式碼和對其所做的更改,然後將所有這些更改“推送”到您的 GitHub 帳戶。

因此,GitHub 既是我們在 React 項目上所做的所有工作的有用備份,也是其他人查看我們的程式碼並對其進行更改的重要途徑。

我應該如何創建我的 React 項目?

如果你正在開始一個新的 React 項目,你將永遠不需要創建自己的文件、文件夾和 package.json 文件(你在其中列出了所有項目的庫)。

有三個很棒的工具可以幫助你在一個命令中立即生成一個新的 React 項目。

  • 創建反應應用
  • 維特
  • Next.js

一旦你安裝了 Node / NPM(見文章開頭),你可以使用這些工具中的任何一個通過以下命令創建一個新的 React 項目:

# for Create React App
npx create-react-app my-react-app

# for Vite
npm init vite@latest my-react-app --template react

# for Next.js
npx create" />< /center>

Create React App是一種行之有效的、可靠的創建新 React 項目的方法,它為您提供了運行、開發和構建項目以進行部署的必要工具和腳本。

Create React App 使用 Babel 和 Webpack 來轉換和捆綁你的程式碼(簡而言之,使其可以在瀏覽器中運行)。

此外,它還提供了很好的開發工具,如 ESLint 來“檢查”您的程式碼,或者在您編寫程式碼時告訴您所編寫程式碼中的問題。

另一方面,Vite使用與 Create React App 不同的捆綁器。它沒有使用 Webpack,而是使用了一個名為 ESBuild 的捆綁器,速度要快幾個數量級。

簡而言之,Vite(法語為“快速”或“快速”)是 Create React App 的更新、更快的替代品。

請注意,其中一項與其他內容不同,即Next.js。

值得一提的是,Next.js 是一個 React框架,這意味著它是一種構建 React 應用程式的“包含電池”的方式,並且包含大量不屬於 React 本身的功能。

我包含 Next.js 的原因是它可以說是創建 React 應用程式的最快和最簡單的方法。一旦您了解了 React 的基礎知識,您將看到 Next 的功能如何讓您更快地構建更完整的 React 應用程式。

但是,如果您想要更小的東西而不必在電腦上創建文件夾、文件和安裝依賴項怎麼辦?

注意:node_modules 文件夾通常可以包含 1000 多個文件夾,用於存放項目的依賴項和對等依賴項,這些文件夾總共會佔用您電腦上數 GB 的空間!

啟動 React 項目的一個好方法是在瀏覽器中進行,並且有許多免費服務可以讓您立即這樣做。⚡️

可以在瀏覽器中創建 React 項目的兩個沙箱服務包括:

這些非常適合在學習教材或想要即時測試一些程式碼時使用。

我們發現創建一個新的 React 項目的最快方法是訪問地址react.new。沒錯——你可以在幾秒鐘內創建一個全新的 React 項目,而無需運行一個命令!

我們實際上需要學習哪些 React 概念?

React 有很多新概念,它們為我們提供了一種新的方式來思考在 Web 上以及一般情況下構建應用程式。

如果您沒有直接構建 React 應用程式的經驗,您如何知道您需要該庫的哪些概念和功能?

好消息是,您不需要所有這些。事實上,當您開始構建 React 項目時,您會發現您在 90% 的工作中使用相同的功能。

對於每天在 React 中工作的人來說,這些包括:

  • JSX
  • 組件(特別是功能組件)
  • 道具和狀態
  • 列表、鍵和事件
  • 核心 React Hooks,主要是useState,useEffect
  • 反應上下文,包括useContext
  • 如何編寫自定義 React 鉤子

了解 React 如何工作的基礎知識以及創建它要解決的問題也很重要。這些概念包括:

  • 渲染和重新渲染(尤其是知道什麼會導致重新渲染)
  • 純函數
  • 副作用
  • 不變性

最後,我們相信至少熟悉 React 類組件是值得的。通過鉤子,我們在很大程度上轉向使用函數組件。但是,您會遇到類組件,尤其是在您使用較舊的程式碼庫時。

如果你想要一個完整的列表,我已經總結了所有主要的 React 概念,我相信每個開發人員都應該在一個方便的備忘單中知道這些概念。你可以在這裡找到它:

我需要學習每一個 React 特性/概念/鉤子嗎?

不,你沒有。專注於我在上面的問題中提到的主要概念。

事實上,即使是最專業的開發人員,也很少使用許多鉤子和 React 特性。僅僅因為它的存在並不意味著你會需要它,並且你不需要花費相同的時間來學習每一個 React 概念。

例如,我每天都使用 React,我可以用一隻手來計算我需要多少次useLayoutEffect鉤子(一個更模糊的 React 鉤子)。

我需要在 React 之前學習 JavaScript 嗎?

由於 React 本質上是一個以“只是 JavaScript”而自豪的 JavaScript 庫,因此如果你要學習 React,你最終也需要精通 JavaScript。

在我嘗試學習 React 之前,我個人學習了 JavaScript,我相信它對我幫助很大。儘管許多其他人聲稱可以從 React 開始“開始”,但您最終會被扔進一個充滿 JavaScript 的世界。

話雖如此,你越擅長 JavaScript,你就越擅長用 React 構建東西。你可以同時學習,最終所有 React 開發人員仍在學習 JavaScript,可以這麼說。

簡而言之,你可以開始學習 React 而不是最擅長的 JavaScript,但是,不要認為你可以完全推遲學習 JavaScript。

如果您想確切了解作為 React 開發人員將使用哪些 JavaScript 技能,請務必查看這篇文章:

我應該使用哪些 React 庫?

有數以千計的 React 庫可以在您的 React 項目中使用。

React 是一個獨立的庫,而不是一個框架。構建項目所需的許多工具在 React 中根本不可用。

React 不提供自己的解決方案來編寫樣式、動畫組件、管理全局應用程式狀態或創建路由或頁面。

要構建任何重要的 React 項目,您將需要熟悉各種庫來為您提供所需的功能。

我可以寫一系列關於我認為最好的 React 庫以及原因的文章,但這是我個人的候選名單:

  • 對於狀態管理,使用Zusand(Redux 仍然可以與 Redux Toolkit 一起使用)
  • 對於樣式,使用TailwindCSS
  • 對於路由,使用React Router(React Location 也很有希望)
  • 對於數據獲取,使用React Query
  • 對於表單,使用React Hook Form

如果你想知道哪些庫值得你的大多數 React 項目使用,請查看這篇文章:

每個項目都需要的 5 個 React 庫

我應該在哪裡部署我的 React 項目?

幸運的是,我對這個問題的回答與其他問題非常相似——部署你的 React 項目有很多很好的選擇。

如果您正在部署使用工具 Create React App 或構建工具 Vite 創建的 React 項目,您構建的項目將由簡單的 HTML、CSS 和 JavaScript 文件組成。

這意味著您的項目可以部署到任何可以託管此類靜態資產的服務,例如:

  • surge
  • Github 頁面
  • 甚至 AWS S3 存儲桶也可以託管您的 React 站點

有很多選項可供選擇,但我強烈建議您將應用程式部署到以下任何一項服務:

  • 網絡化
  • Vercel(最適合 Next.js)
  • Cloudflare 頁面

我已經廣泛使用所有這些服務來託管我自己的 React 項目,並且每個都提供了出色的開發人員體驗。

所有這些服務的最大便利之處在於,您可以立即使用存儲在您的 GitHub 帳戶上的項目,並且每當您向它們推送新的更改時,您的站點都會使用這些更改重新構建和部署。

值得注意的是,這三項服務中的每一項都提供慷慨的免費套餐,因此您無需支付任何費用即可將您的 React 應用程式放到網絡上。

然而,他們的免費套餐附帶一個警告。Netlify 和 Vercel 都對他們的免費計劃施加了每月 100GB 的頻寬限制。如果您的網站每月訪問者少於 100,000 人,並且不包含大量大型圖片和影片等大量資產,則您不必擔心達到此限制。

在這三個中,Cloudflare 擁有無限頻寬的靜態託管提供商中最慷慨的免費計劃。

如果您有興趣將 React 應用程式部署到 Cloudflare 頁面,我們已經編寫了完整的教學。

我應該在哪裡學習 React?

現在有大量的資源可以用來學習 React。如此之多,以至於很難弄清楚哪些是最新的和有用的。

您可以做的最好的事情是找到一個有用的教材並按照它完成,而不是嘗試一次學習幾個。

“追兩隻兔子的人一個都沒抓到。”

如果您剛剛開始,請查看freeCodeCamp 的 React 課程。請務必利用我在每個部分中共享的所有鏈接。這兩種資源都會帶你走很長一段路。

如果您正在尋找一種一體化解決方案來學習 React,從最基本的步驟到構建 Instagram 等全棧應用程式,請查看React Bootcamp。

React Bootcamp 是網路上的一個綜合影片課程,它將教你從初學者到專業 React 開發人員所需知道的一切。