React的元素、組件、事件、props傳遞

經過配置webpack-dev-server啓動一個webserver，自動編譯，自動刷新瀏覽器的功能，咱們開啓React基礎速過

接上一篇：構建React開發環境

使用webpack-dev-server

按照上篇文章構建好React開發環境後，咱們發現每次寫完代碼還須要手動編譯，而且須要本身啓動一個webserver才能夠在瀏覽器預覽效果。

若是你不想這樣每次改完代碼都要手動編譯，並且本身啓動webserver，那麼就要用到webpack-dev-server這個玩意。

注意，這玩意就是開發時用用的，不要用於生產環境！

這玩意還有一個好處，是在改完代碼後，自動刷新瀏覽器，下面動手加上這貨吧

使用yarn安裝webpack-dev-server 到開發依賴中

yarn add -D webpack-dev-server

添加webpack配置，配置devServer

vi webpack.config.js

'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: 'development',
    entry: {
        app: './src/js/index'
    },
    output: {
        filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 過濾
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
};

module.exports = config;

在package.json中添加一個scripts

"dev": "webpack-dev-server"

啓動webpack-dev-server

yarn run dev

以後就能夠自動編譯並啓動一個webserver，用瀏覽器訪問http://localhost:9000

React的元素

React的元素必需要有一個根元素包裹起來，如：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

let me = <h1>編程故事</h1>

ReactDOM.render(
    me,        // 使用元素
    document.getElementById('root')
);

元素裏面能夠包含js的表達式，表達式使用大括號{}包起來

let me = <h1>編程故事{alert('編程故事')}</h1>

React的組件

React的組件使用ES2015中的Class方式定義

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

// 組件能夠外部定義而後在使用的地方在引入
class Me extends React.Component {
    render() {
        return <h1>dongjun{(function(){alert('編程故事')})()}</h1>
    }
}

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

React組件的props傳遞

父組件給子組件傳遞數據，是經過給子組件上定義屬性，在子組件中經過this.props獲取

傳遞多個屬性：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    render() {
        return <h1>{this.props.site} - {this.props.sologen} - {this.props.url}</h1>
    }
}

ReactDOM.render(
    <Me site="編程故事" sologen="個人故事,也許也是你的故事" url="https://www.mi360.cn" />,
    document.getElementById('root')
);

也能夠傳遞一個對象給子組件的屬性，在子組件也要經過對象的方式去獲取

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    render() {
        return <h1>{this.props.site.name} - {this.props.site.sologen} - {this.props.site.url}</h1>
    }
}

const map = {
    name: '編程故事',
    sologen: '個人故事,也許也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    <Me site={ map }/>,
    document.getElementById('root')
);

還能夠使用ES2015中的解構賦值

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    render() {
        return <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
    }
}

const map = {
    name: '編程故事',
    sologen: '個人故事,也許也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    <Me { ...map }/>,
    document.getElementById('root')
);

React的事件

在組件中定義事件處理方法，在組件的render()方法中定義事件監聽

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {

    showMe() {
        alert('編程故事');
    }

    render() {
        return <div>
            <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
            <input onClick={this.showMe} type="button" value="按鈕"/>
        </div>
    }
}

const map = {
    name: '編程故事',
    sologen: '個人故事,也許也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    <Me { ...map }/>,
    document.getElementById('root')
);

還能夠使用箭頭函數直接在事件監聽中處理

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {

    showMe() {
        alert('編程故事');
    }

    render() {
        return <div>
            <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
            <input onClick={() => {
                alert('編程故事')
            }} type="button" value="按鈕"/>
        </div>
    }
}

const map = {
    name: '編程故事',
    sologen: '個人故事,也許也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    <Me { ...map }/>,
    document.getElementById('root')
);

父組件傳遞數組給子組件遍歷

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    
    render() {
        return <div>
            {this.props.data.map((item) => {
                return <h1 onClick={() => {
                    alert(item.name)
                }
                }>{item.name} - {item.sologen} - {item.url}</h1>
            })}
        </div>
    }
}

const map = [{
    name: '編程故事',
    sologen: '個人故事,也許也是你的故事',
    url: 'https://www.mi360.cn'
},{
    name: '246哈',
    sologen: '開心很簡單',
    url: 'https://www.246ha.com'
}];

ReactDOM.render(
    <Me data={ map } />,
    document.getElementById('root')
);

原文連接：https://www.mi360.cn/articles...