Loading...

React.js 是什麼?

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


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

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

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

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

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

學習 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: brownclass:whiteclass:yellow (名稱可參考起始專案 style.css 中的配置)。

預期渲染後的 HTML 如下:

預期成果畫面如下:

參考成果:

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

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