react 簡單入門

2018-08-06

react

本系列是我學習 React 的心得筆記，主要參考 Udemy 上的 React 線上課程 React 16 - The Complete Guide，並輔以 React官方文件、css88 React中文文件，如有說錯或說不好之處，請各位不吝指教。

什麼是 React?

JavaScript library for building user interfaces。 React 官網開宗明義的第一句話告訴我們，React 是一套用於建構使用者介面的 JavaScript 函式庫。

由於 React 就是 JavaScript，所以 React 直接在瀏覽器運作，這表示頁面任何的變化會在用戶的瀏覽器即刻產生，不需等伺服器回應，大大提升反應速度。React 使用元件 (以下以 Components 稱呼之) 建構使用者介面，一個網頁的基本架構可拆成數個 Components，我們以一般最普遍的網頁解釋，React 將 header, sidebar, article, footer…等網頁元素都製成 Components，這讓我們在建構網站時，可將相同的 Components 重複利用而不必撰寫重複的程式碼，這讓團隊協作變得更加容易，當網站需要修改時，也只需要從 Components 修改，而不必將整個網站翻來覆去只為了修改一個小地方。

你可以將 React Components 視為你的自定義 HTML 元素，撰寫 React 視為撰寫你的自定義 HTML 元素，透過 React，你可撰寫易於維護、方便管理，以及可重複使用的程式碼。

Hello, world! Hello, React!

接下來讓我們開始撰寫第一支 React 程式碼，你可以打開你習慣的文字編輯器 (VSCode, Sublime, Atom…etc)，或是使用 Codepen，CodeSandbox 等線上工具，在這裡我們用 Codepen 完成這個範例。

首先我們先在 HTML 裡輸入以下程式碼：

<div class="person">
  <h2>Westbrook</h2>
  <p>Age: 30</p>
</div>

接著撰寫 CSS：

.person {
  padding: 0 20px;
  margin: 10px;
  border: 1px solid gray;
  box-shadow: 2px 2px gray;
  display: inline-block;
}

你會看到我們已經手刻出一張帶有名字與年齡的小卡。

See the Pen React demo by phate (@phate) on CodePen.

此時如果我們想要在網頁中增加第二張小卡，最直接的方式就是在 HTML 裡複製貼上整段 <div class =”person”>

<div class="person">
  <h2>Westbrook</h2>
  <p>Age: 30</p>
</div>

<div class="person">
  <h2>George</h2>
  <p>Age: 28</p>
</div>

在2018年，讓我們用 React 來解決這問題。

首先，在 Codepen 的 JS 欄左上方找到一個齒輪，用力的點下去。

接著會出現 Codepen 的 JavaScript 設定視窗，在 JavaScript Preprocessor 選擇 Babel，然後在 Add External Scripts/Pens 處，我們在搜尋框打上 react，載入 react.js 與 react-dom.js，接著你就可以在 JS 欄寫 React 了。

讓我們開始撰寫 React Component，以便讓我們有一個可重複使用的自定義 HTML 元件，我們先把第一個小卡的 HTML 複製剪下，改成 <div id=”p1”> </div>

<div id="p1"></div>

<div class="person">
  <h2>Payton</h2>
  <p>Age: 28</p>
</div>

緊接著，我們在 JS 裡命名一個 Person 的 function，注意函數名稱的第一個字母要大寫，然後把剛剛 HTML 剪下的 <div class =”person”> 貼在 function 的 return 裡，並用小括號包起來，這是 JSX 的語法，JSX 以後會提到，這邊只要先知道 JSX 是一種可以讓HTML標記直接寫在JavaScript程式碼中的擴充語法即可。而因為 class 是 JavaScript 的關鍵字，所以在 JSX 裡，記得把 class 改成 className。

function Person(){
  return(
    <div className="person">
      <h2>Westbrook</h2>
      <p>Age: 30</p>
    </div>
  )
}

接著我們要在頁面中渲染出我們的 React Component，記得我們在 JS 設定裡有載入一支 React-dom.js 嗎？我們要使用它的 ReactDOM.render() 方法，這讓我們可以將 JavaScript 函數呈現為真實的 DOM，在 ReactDOM.render() 裡頭，第一個參數寫上我們的自定義 HTML 函數 <Person />，然後第二個參數撰寫 document.querySelector(‘#p1’)，這會讓我們的 Copmonent 渲染在#p1。

ReactDOM.render(
  <Person />,
  document.querySelector('#p1')
)

因為我們是在 #p1 塞入 function Person() 的 JSX ，#p1 預設是 display:block，為了併排，我們另外在 CSS 設定 #p1 的 display 值為 inline-block。

1
2
3

#p1 {
  display: inline-block;
}

接著就可以驗收我們的成果：我們成功的自訂 React Component(function Person) 並且渲染在 #p1。

See the Pen react introduce - 02 by phate (@phate) on CodePen.

剛剛 HTML 的程式碼幾乎原封不動的貼到 JSX 裡，雖然簡化了 HTML，但是對於 JS 來說並沒有簡化到哪去，所以我們現在要把 JSX 裡會變化的參數抽出來，這裡用到 React 一個傳遞參數的功能 props。

現在我們把 function Person() 放入參數 props，然後把 JSX 的姓名與年齡抽出來，用{props.name} 與 {props.age} 代替。

function Person(props){
  return(
    <div className="person">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  )
}

接著我們將個別的姓名與年齡寫在 ReactDOM.render 的根物件裡：

ReactDOM.render(
  <Person name='Gary' age='30' />,
  document.querySelector('#p1')
)
ReactDOM.render(
  <Person name='Payton' age='28' />,
  document.querySelector('#p2')
)

現在再來看一下我們的成果：

See the Pen react introduce - 03 by phate (@phate) on CodePen.

最後，為了避免連續調用兩次 ReactDOM.render，我們宣告一個變數 app 把兩組 <Person /> 放進去，這裡有一個重點，JSX 只接受一個根元素，所以我們必須另外用 div 把兩組 <Person /> 包起來。

以下程式碼就是我們的最終成果。

See the Pen react introduce - 04 by phate (@phate) on CodePen.

參考連結:
React 16 - The Complete Guide
搞懂為何設定 React、JSX、ES2015、Babel、Webpack 的學習筆記
 RUNOOB.COM - React 安装
 DOM界的彼方(繁中) - React篇: JSX語法撰寫指引
 React 初学者教程7：深入 JSX

uncategorized

什麼是 React?

Hello, world! Hello, React!