九月 12, 2019

【教學】如何開始React網頁最簡單的方式

A JavaScript library for building user interfaces
用於構建用戶界面的 JavaScript 庫。
React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫，可以降低互動式網頁應用程式開發難度，自動處理各種複雜 UI 組件與資料間的連動關係，改善應用程式執行效能。

使用React這套 JavaScript 函式庫，可以很有效率的開發前端互動式網頁應用，且是許多開源來自世界的社群開發者都在使用，並發展了許多好的 plugins 模組等，所以很多東西都不用自行再造輪子，只要懂得怎麼使用，你可以很快的製造好一台跑車。當然 React 也解決了許多前端開發的痛，讓網頁設計真的可以達到前後端分離，不管你的後端使用的是什麼語言，前端只有 Javascript、CSS、HTML，任何的資料請求都經由 AJAX ，你完全拋離了過去靠著使用者請求 Server，Server 在 render 出網頁的方式，這說明了網頁可以做出互動性高的應用。

本篇將教你如何以最簡單方式，開始你的一第一個 React 網頁，讓初學者能夠快速了解 React 這套 JavaScript 函式庫。

開始使用React

使用React有許多方式，但這邊選擇一般網頁設計較容易了解的方式開始，也就是在你的網頁上加上<script>標籤，加入React致你的網頁。其他還有官方簡單使用的npm Create a New React App方式。

在網頁<body>內加入，為之後react輸出產生的虛擬DOM的地方id="root"。

<div id="root"></div>

在網頁</body>前加入React所需要的必要react與react-dom的庫，並加載babel讓我們可以使用jsx語法，與可以解析Javascript ES6以上語法。

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

在寫一段ReactDOM.render出Hello, world!輸出至<div id="root"></div>。(<script> 加入type="text/babel"標籤裡面的語法，才會使用babel去解析`)

<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById("root")
    );
</script>

整段完整網頁程式碼長這樣。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React</title>
    </head>
    <body>
        <div id="root"></div>
        <script
            src="https://unpkg.com/react@16/umd/react.production.min.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
            crossorigin
        ></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, world!</h1>,
                document.getElementById("root")
            );
        </script>
    </body>
</html>

Demo React Hello World

React使用class元件

元件在React中扮演著重要的角色，他可被重複利用，元件中可有子元件，父元件資料可經由元件屬性參數傳遞至子元件。這邊只簡單的提一下元件的的能做的事情，基本的應用實際操作後會比較能夠了解。

新增一個class命名為App繼承React.Component並render函數返回一個<h1>Hello, world!</h1>，再將ReactDOM.render輸入端改成為<App/>元件。畫面不會有任何變化，但我們已經成功使用元件的方式寫入了<h1>Hello, world!</h1>。

<script type="text/babel">
    class App extends React.Component{
        render(){
            return <h1>Hello, world!</h1>;
        }
    }

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

Demo React Component Hello world

React在元件中添加元件

我們可在<App/>原件中加入其他元件，如下<Body/>子元件。再將<App/>內容改變如下，可以看到畫面會呈現出<Body/>元件內<div>Body</div>字樣。

class Body extends React.Component {
    render() {
        return <div>body</div>;
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <Body />
                <input type="text" />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

React Demo Component in Component

React元件增加狀態

在React中元件都有可儲存自己本身的資料狀態，並也可繼承父層級的狀態props。在App元件內增加狀態state = { content : "body"}，狀態為content內容資料一樣為body。

class App extends React.Component {
    state = { content : "body"}
    render() {
        return (
            <div>
                <Body/>
                <input type="text" />
            </div>
        );
    }
}

React元件資料狀態傳遞至子元件

現在將state = { content : "body"}傳送到Body子元件內，Body子元件需要設置constructor(props)使用super(props)做繼承。在使用this.props叫出繼承的狀態資料。如下：

class Body extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>{this.props.content}</div>;
    }
}

class App extends React.Component {
    state = { content : "body"}
    render() {
        return (
            <div>
                <Body content={this.state.content} />
                <input type="text" />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

App元件裡也可以使用constructor函數做狀態設定如下。

constructor(props) {
    super(props);
    this.state = { content : "body"};
}

React Demo Component add State

React改變你的元件狀態

在App元件內增加一個名稱為changeContent()函式，function內帶入參數changeContent(value)，裡面使用了react的改變裝態的函式this.setState()，放入要改變的狀態值{content:value}。

App元件內<input>標籤新增onChange事件，並使用箭頭函數並返回event.target.value事件，input輸入的資料內容，放入onChange(e)=>this.changeContent(e.target.value)。

class Body extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>{this.props.content}</div>;
    }
}

class App extends React.Component {
    state = { content : "body"}
    changeContent(value){
        this.setState({
            content:value
        })
    }
    render() {
        return (
            <div>
                <Body content={this.state.content} />
                <input type="text" onChange={(e)=>this.changeContent(e.target.value)} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

這時當你輸入<input>時就會驅動onChange，將e.target.value傳入changeContent()，去使用this.setState()，改變this.state.content狀態值。

React Demo Change Component State

希望這樣的簡單流程介紹React，對各位初學有幫助。

© UCAMC. All rights reserved.
Powered by CITIAR.