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

自動的にコンパイルしてWeb serverを起動し、ブラウザでhttp://localhost:9000にアクセスすることができます.
Reactの要素
Reactの元素は必ず一本の要素で包んでください.

'use strict';

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

let me = 
    

ReactDOM.render(
    me,        //     
    document.getElementById('root')
);

要素の中にはjsの表現が含まれています.表現は大かっこを使います.

let me = 
    {alert('    ')}

Reactのセット
ReactのコンポーネントはES 2015のクラス方式で定義されています.

'use strict';

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

//                    
class Me extends React.Component {
    render() {
        return 
dongjun{(function(){alert('    ')})()}
    }
}

ReactDOM.render(
    ,
    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 
{this.props.site} - {this.props.sologen} - {this.props.url}
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

サブアセンブリの属性は、1つのオブジェクトに渡すこともでき、サブアセンブリでもオブジェクトによって取得されます.

'use strict';

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

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

const map = {
    name: '    ',
    sologen: '    ,        ',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    ,
    document.getElementById('root')
);

ES 2015におけるデスティネーション値も使用できます.

'use strict';

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

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

const map = {
    name: '    ',
    sologen: '    ,        ',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    ,
    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 

            
{this.props.name} - {this.props.sologen} - {this.props.url}
            
        
    }
}

const map = {
    name: '    ',
    sologen: '    ,        ',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    ,
    document.getElementById('root')
);

矢印関数を使って直接イベントの傍受中に処理することもできます.

'use strict';

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

class Me extends React.Component {

    showMe() {
        alert('    ');
    }

    render() {
        return 

            
{this.props.name} - {this.props.sologen} - {this.props.url}
             {
                alert('    ')
            }} type="button" value="  "/>
        
    }
}

const map = {
    name: '    ',
    sologen: '    ,        ',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(
    ,
    document.getElementById('root')
);

親コンポーネント転送配列は、サブアセンブリを巡回します.

'use strict';

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

class Me extends React.Component {
    
    render() {
        return 

            {this.props.data.map((item) => {
                return 
 {
                    alert(item.name)
                }
                }>{item.name} - {item.sologen} - {item.url}
            })}
        
    }
}

const map = [{
    name: '    ',
    sologen: '    ,        ',
    url: 'https://www.mi360.cn'
},{
    name: '246 ',
    sologen: '     ',
    url: 'https://www.246ha.com'
}];

ReactDOM.render(
    ,
    document.getElementById('root')
);

原文のリンク:https://www.mi360.cn/articles...