前端最重要的工作,就是讓網頁的資料與狀態視覺化,有資料狀態改變時,就要更動網頁內容的顯示。但當網頁內容複雜化,網頁元件、元件操作功能和資料狀態的數量增加,就可能會需要非常大量的程式碼來實現,而越大量的程式碼在開發過程就更不好維護。 因此為了解決這樣的問題,就有了加速應用程式開發的工具 — 框架(Software Framework)。
框架(Software Framework)提供一個基礎的開發架構,包含可重複使用的結構和通用的方法。本身無法運作,搭配開發者的程式碼就能建立一個完整的應用程式,是一個讓開發者能夠更容易去擴展、維護專案的工具。
擺脫過去以網頁頁面分類 HTML、CSS、JS 程式碼的模式,前端框架著重於以資料狀態為基礎建立程式碼的架構,提倡將介面元素組件化,將該組件有關的程式碼,包含元件渲染、資料處理、操作功能,都放在同一個組件內,省去抓取元素更新資料的時間。常見的前端框架有 Angular、Vue、React,接下來的幾篇文章,我們就會來學習如何使用 React 框架開發網頁。
React 是由Facebook開發的一個開源的前端框架,用 JavaScript 建立的一套函式庫,可以藉由獨立的組件(component),來建立複雜的網頁介面。
為了省去建置專案的時間,可以直接使用 Codesandbox 內建的 React 專案模板。
一般的 React 文件結構大概會有:
const element = <h1>Hello Codesandbox</h1>;
這樣一行看起來既像 HTML、又像 Javascript 的程式碼就是 JSX。JSX 擴充了 JavaScript 的語法,能夠將 HTML 元素寫在 JavaScript 裡面變成 React Element。讓我們試著將 app.js 改寫成:
export default function App() {
let name = 'May';
const element = <h2>Start editing to see some magic happen!</h2>;
return (
<div className="App">
<h1>Hello {name}</h1>
{element}
</div>
);
}
你可以在 JSX 的大括號中寫入 JavaScript 的表達式,比如純值、變數、函式...等等。在上面的範例中,宣告名為 name
的變數,值是字串,並在 JSX 中將變數名稱包在大括號中,就能將變數傳入到 HTML。
而 JSX 最終還是會轉換成 JavaScript,舉例來說上面的常數 element
,就會變成下面的 JavaScript。使用 JSX,可以在實作 React Element 上能夠更簡潔、讓結構寫起來更容易。
const element = React.createElement('h2',null,'Start editing to see some magic happen!');
與 HTML 裡面的元素不同,React 裡面的 Element 只是一個物件,所以還需要進一步將元素渲染到網頁上。在index.html 內部只有一個元素 <div id="root"></div>
,通常會將這個元素當成是 React DOM 的入口,在透過 ReactDOM.render
把 React Element 渲染到網頁上。下面就是 Render Element 簡單的例子:
const element = <h1>Hello Codesandbox</h1>;
ReactDOM.render(element, document.getElementById('root'));
但我們不可能把每個 Element 都列在 ReactDOM.render
內,程式碼會太冗長而且難以閱讀。在前面有提到 React 最重要的概念就是透過 Component 來構建網頁介面,可以將一連串的 React Element 包裝起來回傳,像是 index.js 裡面的 <App />
就是一個 React Component。
index.js
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
閱讀完今天的文章,大致了解 React 如何使用 JSX 來撰寫 React Element,並且成功將它 Render 到網頁上,希望大家都有稍微體會到使用框架,能夠讓開發更語意結構化、更便利的優點。下一個章節我們就會帶大家實作 React Component、以及如何在組件內來進行資料的處理。
如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️