iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 19

[Day 19 - React] 現在開始用框架寫網頁 — React

  • 分享至 

  • xImage
  •  

為什麼要使用框架?

前端最重要的工作,就是讓網頁的資料與狀態視覺化,有資料狀態改變時,就要更動網頁內容的顯示。但當網頁內容複雜化,網頁元件、元件操作功能和資料狀態的數量增加,就可能會需要非常大量的程式碼來實現,而越大量的程式碼在開發過程就更不好維護。 因此為了解決這樣的問題,就有了加速應用程式開發的工具 — 框架(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、以及如何在組件內來進行資料的處理。

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

參考資料


上一篇
[Day 18 - webpack] 模組化開發好幫手 — 打包工具 webpack
下一篇
[Day 20 - React] 網頁UI組件化 — React component
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言