React 新手入門

React 新手入門

Hello React

正如其官方標語所述,React是一個用來建構使用者介面的函式庫。React 不是框架——它甚至不是 web 獨有的開發技術,它可以和其他函式庫或套件搭配使用,以在特定環境中渲染。例如,React Native可用來建立手機應用程式;React 360可以用來建立 VR 應用程式;除此之外還有很多的可能性。

為了要建構 web,開發者將 React 與ReactDOM搭配使用。React 與 ReactDOM 的組合經常與其他 web 開發框架相提並論——以用於解決相同的問題。當我們稱呼 React 為「框架(framework)」時,我們是使用口語化的理解好加以討論。

(使用)React 的主要目標是最大限度減少開發者建構 UI 介面時出現的錯誤。它通過使用元件——描述部分使用者界面且自成一體的邏輯與程式碼段落來實現這點。這些元件可以組合在一起以建立完整的 UI 界面,React 將大部分的渲染邏輯給抽象化出來,讓你可以專注於 UI 層的程式設計。

使用範例

與本文章模組中涵蓋的其他框架不同,React 不會對程式碼風格規範或檔案組織實施嚴格的規則限制。這允許團隊設置最適合他們的開發規範,並以任何他們想要的方式採用 React。React 可以處理單一個按鈕、界面的幾個部分或應用程式整個使用者界面。

儘管 React可以用來開發介面的少許部分,但它沒辦法像 jQuery 函式庫,甚至像 Vue 這樣的框架能簡單「引入(drop into)」進應用程式中——當你使用 React 建構應用程式時,它會更加平易近人。

此外,React 應用程式有許多開發者體驗(developer-experience)優勢,例如使用 JSX 編寫介面時會需要編譯過程。添加如 Babel 這樣的編譯器到網站上會讓程式碼執行效率變慢,因此開發者通常會在建構階段中設置此類開發工具。React 對開發工具需求蠻吃重的,但這些都是可以學習的。

本文將重點介紹透過 Facebook 提供的create-react-app工具,來使用 React 渲染應用程式使用者界面的範例。

React 如何使用 JavaScript?

React 在許多設計模式中利用了現代 JavaScript 特性。它與 JavaScript 最大的區別在於使用JSX語法。JSX 擴展了 JavaScript 語法,以便能與類似 HTML 的程式碼並存。例如:

jsconst heading =

Mozilla Developer Network

;

這個heading變數又稱為JSX expression(JSX 表達式)。React 可以在我們的應用程式中使用它,以渲染顯示

標籤

假如我們出於語義化的原因,想要將heading包裹在

標籤中,那該怎麼做呢?JSX 方法允許我們將元素互相嵌套,就像我們在使用 HTML 一樣:

jsconst header = (

Mozilla Developer Network

);

備註:前面程式碼中的括號(、)不是 JSX 獨有的,這對你的應用程式沒有任何影響。它們會向你(和你的電腦)發出訊號,表示括號其中的多行程式碼是同個表達式的一部分。你也可以像這樣編寫表達式:

jsconst header = (

Mozilla Developer Network

);

然而,這樣寫看起來有點不對勁,因為這段表達式

的開始標籤沒有縮排到與其對應結束標籤相同的位置。

當然,若沒有其他的幫助,你的瀏覽器是無法直接讀取解析 JSX 的,當編譯完成(藉由使用像Babel或Parcel之類的工具),我們的 header 表達式看起來像這樣:

jsconst header = React.createElement(

"header",

null,

React.createElement("h1", null, "Mozilla Developer Network"),

);

是可以跳過編譯階段,並使用React.createElement()來撰寫你自己的 UI 介面的。但是,這樣做會失去 JSX 的聲明性優勢,並且程式碼更難閱讀。雖然編譯是開發過程的額外步驟,但是許多 React 社群的開發者認為為了可讀性,使用 JSX 是值得的。此外,各種流行工具能使 JSX 到 JavaScript 的編譯成為其設置過程的一部分。除非你想,否則你不必自己配置編譯設定。

因為 JSX 是 HTML 和 JavaScript 的混合體,有一些開發者覺得它很直觀。也有其他人認為 JSX 的混合性使其變得混亂。但是,一旦你對它開始熟悉,JSX 能讓你更快、更直觀地建構使用者界面,並允許其他人一眼就能更好地理解你的程式碼(codebase)。

要閱讀更多有關 JSX 的資訊,可以查看 React 團隊的JSX In Depth文章。

設置你的第一個 React 應用程式

有很多方法可以使用 React,但我們將使用命令行界面(CLI)工具 create-react-app。如前面所說,它可以透過安裝一些套件和創建一些文件檔案以處理上面描述的工具,使其可以用來加速開發 React 應用程式的過程。

是可以不使用 create-react-app 就將 React 加入到網站裡的,藉由複製一些