Web 技術

React 教學，系統性學習 React 的步驟

發佈日期: 作者:

React.js 是什麼？

React.js (以下簡稱 React) 是 Facebook 所維護並開源的函式庫（或是有些人習慣用「前端框架」來統稱），用於建立應用程式的使用者介面。在瀏覽器環境傳統的前端撰寫方式中，我們會遇到各種像是資料與畫面同步、抽象畫拆分與重用等需求和問題，而 React提供了一個抽象層作為解決方案，讓我們能以高效、優雅、容易預測的方式撰寫並維護前端應用程式。


前端框架是什麼？了解Javascript框架的功能與優點

為什麼要使用 React? 有什麼優點

  • 靈活高效，是全球最受歡迎的前端框架
  • 就業市場機會多，需求旺盛
  • 薪資水平較高，年薪百萬的機會非常多

為什麼現在是學 React 的好時機？

因為 React Hooks 推出了以後 (Hook 是 React 16.8 中增加的新功能)，不需要有物件導向的背景，只要了解 JavaScript 的 function (函式) 怎麼運作，就可以入手。

React 正夯，業界需要怎樣的 React 工程師？薪水真的很高嗎？

前端框架解決了什麼開發問題？原來前端框架是這樣演進來的

學習 React 的先決條件

要學習如何使用React，你需要有一些基本的能力先備知識，包含

1. 熟悉 HTML & CSS 基礎語法，並至少要能夠使用 Bootstrap 組裝出一頁式網站

2. 熟悉 JavaScript 基礎語法，包括

  • DOM
  • 事件處理
  • 函式封裝與調用
  • 陣列操作語法
  • 要有 ES6 module 的概念 (import & export)
  • JS 非同步 (Promise, Async / Await)，打 API 會用到

3. 有網際網路的基礎觀念，包括HTTP 的請求與回應、網路資源和 URL 之間的對應關係

4. 知道什麼是 MVC 程式架構、RESTful API 設計風格

5. 會終端機的基本操作語法，例如檔案建立或在資料夾之間切換移動

React 學習資源

React 官網 – 學習指南

Reactiflux：這是一個開發者聊天社群，有關於Javascript、React、Redux和相關主題的學習資源和文章

Awesome React：也是一個蠻完整關於React生態系的主題列表整理

Awesome React Components: 這個list整理了React components的資源

React 需要學會哪些東西

ALPHA Camp 幫大家定義出來的 React.js 入門必學的範疇，包含

1. 知道什麼是前端框架

  • 前端工程師在開發中扮演的角色與關注的重點
  • 什麼是前端框架，並且知道前端框架在解決什麼問題
  • Single Page Application

2. 能夠建立 React 專案

  • 本地環境建置
  • 線上環境建議 (eg. CodeSandbox)

3. 知道什麼是 Virtual Dom 和 React Elements，並且能夠建立 React Elements，也會使用 JSX 語法糖

4. 熟悉基本的 React 框架操作，並且有資料流的觀念，能夠建立元件並傳遞資料

  • Component & Props
  • State & Reconciliation
  • Component 的生命週期 & Effect
  • Refs

5. 掌握 React 基礎實戰技巧，能用 React.js 做到：

  • 事件處理
  • 表單處理
  • 呼叫、串接後端 API
  • Routing
  • 狀態管理

6. React Hooks

  • 認識 React Hooks 的原理與想解決的問題
  • 能夠使用基本用法如 useState、useEffect

7. React Context

使用線上開發環境建立你的第一個 React 專案

單一支檔案的情境：寫下第一行 Hello, world！

用線上編輯器 CodePen 來練習，可以隨意變更裡面的程式碼來觀察最後輸出的變化，這也是大部分指南的範例都可以這樣編輯。

這個Copen已經預載React，會被前處理器 Babel編譯過再執行。如果單純要練習一個元件可以用Copen。

‍

‍

多支檔案的情境，我們會用線上編輯器 CodeSandbox 來練習，他長得很像VSCode。當開發專案越來越大，會有拆分檔案的動作。如果把header, main, footer 不同功能東西寫在一起會比較難管理。但CodeSandbox可以新增不同檔案個別編輯。

React練習實作的小範例

透過這份小練習，希望幫助你檢查自己是否：

  • 了解 Virtual DOM 的原理
  • 可以透過不同的語法糖(createElement 、JSX) ，實作簡單的資料渲染

請 Fork 這個專案，分別使用 React.createElement() 與 JSX 實作出指定的畫面內容。

  1. 頁面有一個 div 標籤、一個 h1 標籤、一個 ul 標籤內包含三個 li 標籤。
  2. h1 標籤給定 id 為 title。
  3. 三個 li 標籤請依序給定 class: brown、class:white、class:yellow (名稱可參考起始專案 style.css 中的配置)。

預期渲染後的 HTML 如下：

預期成果畫面如下：

參考成果：

以上是從非常簡單的主題導覽到小練習，帶你了解學習React需要學習哪些主題，並且能夠更有系統的按部就班上手React

從技術學習到轉職成功，成為與業界接軌的軟體工程師