###### tags: `前端技能樹`

# 現在開始用框架寫網頁 — React

### 為什麼要使用框架？

前端最重要的工作，就是讓網頁的資料與狀態視覺化，有資料狀態改變時，就要更動網頁內容的顯示。**但當網頁內容複雜化，網頁元件、元件操作功能和資料狀態的數量增加，就可能會需要非常大量的程式碼來實現，而越大量的程式碼在開發過程就更不好維護。** 因此為了解決這樣的問題，就有了加速應用程式開發的工具 — 框架(Software Framework)。

框架(Software Framework)提供一個基礎的開發架構，包含可重複使用的結構和通用的方法。本身無法運作，搭配開發者的程式碼就能建立一個完整的應用程式，是一個讓開發者能夠更容易去擴展、維護專案的工具。

### 前端框架

擺脫過去以網頁頁面分類 HTML、CSS、JS 程式碼的模式，**前端框架著重於以資料狀態為基礎建立程式碼的架構，提倡將介面元素組件化，將該組件有關的程式碼，包含元件渲染、資料處理、操作功能，都放在同一個組件內，省去抓取元素更新資料的時間**。常見的前端框架有 Angular、Vue、React，接下來的幾篇文章，我們就會來學習如何使用 React 框架開發網頁。

## React

React 是由Facebook開發的一個開源的前端框架，用 JavaScript 建立的一套函式庫，可以藉由獨立的組件(component)，來建立複雜的網頁介面。

### 建置React專案

為了省去建置專案的時間，可以直接使用 Codesandbox 內建的 React 專案模板。


一般的 React 文件結構大概會有：

- **public**：包含瀏覽器要讀取的文件，而 React 會將程式碼綁定到 index.html ，讓瀏覽器可以運行你所開發的內容。
- **src**：主要放置我們開發的程式碼。 app.js 就是拆解的 React 組件(Component)，裡面包含與該組件有關的程式碼；index.js 則是應用程序的入口點，會綁定 HTML 的元素，讓組件可以顯示在網頁上。

### 使用 JSX 建立 React element

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!');

### Render Element

與 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、以及如何在組件內來進行資料的處理。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

### 參考資料
- [React Document](https://zh-hant.reactjs.org/docs/getting-started.html)