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

9 月 12, 2019 | Javascript, | 0 條留言

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 crossorigin="" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin="" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></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!,
        document.getElementById(root)
    );
</script>

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


        <meta charset="UTF-8"></meta>
        <meta content="width=device-width," initial-scale="1.0" name="viewport"></meta>
        <meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
        <title>React</title>

        <div id="root"></div>
        <script crossorigin="" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin="" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, world!,
                document.getElementById(root)
            );
        </script>

Demo React Hello World

See the Pen React Demo Hello world by Leon Cheng (@jq153387) on CodePen. ## 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!;
        }
    }

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

Demo React Component Hello world

See the Pen React Demo Component Hello world by Leon Cheng (@jq153387) on CodePen. ## 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>
                </div>
                <input type="text"></input>

        );
    }
}

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

React Demo Component in Component

See the Pen React Demo Component in Component by Leon Cheng (@jq153387) on CodePen. ## React元件增加狀態

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

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

        );
    }
}

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>
                </div>
                <input type="text"></input>

        );
    }
}

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

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

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

React Demo Component add State

See the Pen React Demo Component add State by Leon Cheng (@jq153387) on CodePen. ## 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>
                </div>
                <input onchange="{(e)=" type="text"></input>this.changeContent(e.target.value)} />

        );
    }
}

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

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

React Demo Change Component State

See the Pen React Demo Change Component State by Leon Cheng (@jq153387) on CodePen. 希望這樣的簡單流程介紹React,對各位初學有幫助。