Apps Script用Sheet生成動態網頁(16): 認識React

-

 在上一篇Apps Script用Sheet生成動態網頁(15): 使用React動態網頁範本我們使用了React網頁的範本，為了日後進行順暢，需要先對React有基本認知。這篇以範例的內容，對React做說明。

根元素及React套件引用

我們進入範本的src/client/demo-bootstrap，可以看到index.html就是我們的首頁，裡頭你會看到一個寫得很長的stylesheet的link元素，這是我們的bootstrap的CSS來源；以及body內放了一個section標籤id為index，這就是我們React的根元素。

React是如何產生畫面的就是依靠javascript運作的，所有的React的功能都是由index.js畫到根元素上才開始的。

透過index.js下面得這個指令我們可以把React跟網頁上的根元素做榜定

ReactDOM.render(<App />, document.getElementById('index'));

我們從之前的介紹中應該只會知道document.getElementById('index')這句是用id抓取網頁上的元素。而ReactDOM.render()和<App />都是沒看過得東西。

ReactDOM是由套件引用語法所載入的套件react-dom，然後為了做根元素榜定，會需要一個React元件以及一個網頁元素，而<App />這個標籤就是React元件。

引用語法就是寫在最前面的import 變數名稱  from 套件名稱，套件如果是用npm/yarn安裝的就只要在from後面以引號寫上該套件的名字；而若是自己寫套件/元件，就是以相對路徑開頭，就像App是./components/App這個相對路徑。我們可以在src/client/demo-bootstrap/components中找到App.jsx這個就是程式碼。

import App from './components/App';

透過呼叫ReactDOM套件的render我們就完成了React根元素榜定。接下來我們介紹App這個元件

React元件

在React的世界中有兩種不同的元件(component)，一種是class，一種是functional。functional元件在React稍早版本只能用來處理擁久不變的元件或是產生一些可置換性的元件，不過在範本中已經使用了React 17版，可以全部使用functional元件來構成我們的React網頁。

以下簡單對照一下兩種元件

functional元件

const Welcome = props => (<h1>Hello, {props.name}</h1>);

class元件

class Welcome extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}</h1>;

  }

}

以上從官方資料延伸: https://zh-hant.reactjs.org/docs/components-and-props.html

你可能會覺得好像class元件也不會很難寫，我當初也這麼覺得，後來我自己實際使用後，真心覺得class是需要好好的了解生命週期，才不會寫出問題很多的React元件。

範本裡面我們的App.jsx就是一個functional元件，你可以看到寫了一些不懂的引用套件寫法。

import React, { useState } from 'react';
import { Container, Button, Alert } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';

針對這個引用，稍做一下解釋，就是引用時可以只針對套件裡頭特定的多個功能做引用，也就是{}的由來，它可以引用變數, function或是class，只是透過{}形式的名稱必須跟套件內寫的名稱一樣，不像前面引用React或是App其實都是可以自行改名稱的。

接著我們再回到App元件本身，你可以看到是由一些程式碼寫在return之前所構成的。

...
const App = () => {
const [showBtn, setShowBtn] = useState(true);
const [showUrl, setShowUrl] = useState();

const getServerUrl = () => {
serverFunctions
.getServerUrl()
.then(setShowUrl)
.catch(alert);
};

return (
<Container>
...

是的，這個程式碼就是由3段構成，初始畫一些東西showBtn,showUrl; 定義一些函數getServerUrl，然後return一堆JSX元件。沒錯! 因為是定義跟使用JSX元件，所以建議是要把檔案副檔名改成jsx而不建議用我們熟知的js。

在App.jsx的最後則是將App元件會出成預設(default)模組

export default App;

這樣在index.js或其他元件中就能用import來引用App元件。


你問我上面提到的JSX到底是什麼？其實就是由React所提供的一種語法糖，所以React中會廣泛使用。我建議看官方的說明比較好，以下提供相關的說明連結


JSX寫這樣
const element = (
<h1 className="greeting">
Hello, World!
</h1>
);

經過JSX轉換，可以簡化寫成這樣
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, World!'
);

留言

張貼留言