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所需要的必要reactreact-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.Componentrender函數返回一個<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,對各位初學有幫助。

您也可能喜歡這些文章

Javascript邏輯運算子

邏輯運算子 邏輯運算子 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時, 它們會回傳布林型態的值。 然而,&& 和...