前端框架 - React 初體驗（環境建置、component 建立）

文章目的

為何想學習 React？因為在職場上，React 的開發需求還是相當的多，即使這幾年 Vue 的興起， React 的需求似乎還是沒有減少的趨勢，既然還是一個非常夯的框架，學習使用它絕對是百利無一害啊！！

簡單介紹

React 基本上就是一個 SPA (Single Page Application) 單頁式應用程式，簡單來講就是讓網頁永遠維持在同一頁，內容變更都是根據 js 動態產生，以此提高使用者體驗。

更詳細的 SPA 介紹與其他架構比較，可以參考胡立大大的文章，寫得非常詳細。

筆者在此文章並不會多加說明 React 的整個運作模式，而是比較偏向實戰紀錄，若想了解運作模式也可以參考官網。

建立一個 React 的專案

請先確保電腦已經安裝 node，可以在 terminal 中輸入 node -v，若沒有出現版本號代表尚未安裝，請先至官網下載。

接下來我們就可以來創建專案囉！

先利用 terminal cd 到我們要放專案的地方，然後輸入 npx create-react-app 你要的專案名，npm 就會自動幫我們建立好 react 的專案，而且專案內有了基本的設定。

React 架構基本介紹

就像前面說的，React 是 SPA 架構，所有的內容都是由 js 產生，因此我們的開發就會是充滿一支支的 js 檔案。

React 開發上推薦利用 component 的概念來組成 ui，並且利用 props 來傳遞資料到不同的 component 中。

例如：button 會有一個 button 的 js 檔，我們透過在其他檔案引入這個 button component 來使用它，當需要更改相關 button 樣式時，只需要去該 js 檔做修改即可。

所有 component 的劃分，都應該根據專案的需求與適合度來調整、劃分。

創建 component

JSX

首先要先說明 JSX 這個語法，這是一種語法糖，他讓我們在開發上會更加直覺且簡潔，React 推薦利用此語法來撰寫我們的 component，當然你也可以選擇不使用，但既然此語法能使開發更加方便，為何不用呢XD。

當然我這裡並沒打算詳細介紹 JSX，如果想更了解 JSX 對 React 開發上的好處，可以參考這篇文章。

此文章之後範例的寫法都將傾向使用 JSX。

component 區分

React 用兩種方式來定義 component，分別是 stateful components & stateless components。

stateful 是帶有狀態的 component，可以用來操作狀態，來 render 我們要的 ui，而 stateless 則是沒有帶狀態純 render 的 component。

stateful 相較於 stateless 可以進行較複雜的操作，但效能較差。

基本上會希望父元件是 stateful 可以處理各種資料及狀態，底下的子元件則是 stateless，負責 render 父元件傳來的資料。

component 範例

有了基本的 component 認知，我們就來看一下實際的 stateful components 與 stateless components。

import React, { Component } from 'react';
import './button.scss';

class Button extends Component {
  constructor(props) {
    super(props)

    this.state = { testName: '測試' }
  }
  handleClick () {
    let testName = this.state.testName
    testName = testName === '測試' ? 'test' : '測試'
    this.setState(state => ({
      testName: testName
    }))
  }

  render() {
    return (
      <button className="btn" onClick={() => this.handleClick()}>
        這是一個{this.state.testName}
      </button>
    )
  }
}

export default Button;

此範例我創建了一個 button 的元件，這是一個 stateful components 因為他對 state 做了處理。

先用 es6 的 class 定義了此元件為 Button ( 記得 component 名稱字首一律大寫 )，render 這個 function 是唯一一個必要的 function，他負責回傳我們要 render 的 html 結構。

接著我們來看看 constructor，我們若需要在 component 中定義 this.xxx 就會需要 constructor，constructor 同時允許我們在 constructor 中針對 props 做操作。

handleClick 是屬於 component 裡的 function，他透過我們綁定在 button 上的 onClick 事件來觸發，用來操作 state。

相信到了這裡已經對 stateful components 有了一定程度的了解，那我們接下來看看 stateless components，範例將會一樣沿用 Button 來改寫。

import React from 'react';
import PropTypes from 'prop-types';
import './button.scss';

const Button = ({name}) => {
  return (
    <button className="btn">
      這是一個{name}
    </button>
  )
}

Button.propTypes = {
  name: PropTypes.string
}

Button.defaultProps = {
  name: '測試2'
}

export default Button

這是一個很單純 functional component 寫法，其中的 name 是透過 props 傳入的，也就是我們在父元件定義的，以此範例來說父元件的 Button 會長這樣 <Button name="test" />。

這邊有看到一個叫 PropTypes 的東西，我們可以透過它定義 props 進來的資料型別，以確保資料類型的正確。

另外，我們也可以透過 defaultProps 賦予 props default 的值。

當我們不需要操作 state 時，就可以用此方法創建 component 來提升效能。

參考資料

官網
 從零開始學 ReactJS