前言：React是一個非常棒的用于構建用戶界面的Javascript庫。

image

項目環(huán)境

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。 如果你沒安裝，可以點擊==>

NPM Node.js的包管理器 npm，是全球最大的開源庫生態(tài)系統(tǒng)。去安裝===>

假如你們這兩個環(huán)境已經(jīng)配置好，那么快和我一起開始React之旅吧

==開發(fā)工具:== WebStorm

==系統(tǒng):== Mac os

==腳手架== webpack

cd/項目根目錄

npm init!

image.png初始化完成后你會發(fā)現(xiàn)多處一個package.json文件

image.png

3. ==配置babel==

安裝：  npm install --save-dev babel-preset-react

npm install --save-dev babel-core

npm install --save-dev babel-loader

npm install --save-dev babel-preset-es2015

image.png

4.安裝React、React-dom

npm install --save-dev react react-dom

4.新建html文件，項目目錄結(jié)構如下：

image.png

image.png

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
    render(){
        return(
            <div>Hello World!</div>
        );
    };
}
ReactDom.render(<App />,document.getElementById('app'));

image.png

6.安裝webpack，并進行配置

 npm install --save-dev webpack

項目根目錄新建webpack.config.js文件，并進行配置

var webpack = require('webpack');
var path = require('path');
// var HtmlwebpackPlugin = require('html-webpack-plugin');//html模塊
var FastUglifyJsPlugin = require('fast-uglifyjs-plugin');//資源包壓縮

//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var INDEX = path.resolve(ROOT_PATH, 'src/demo.js');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports = {
    devtool: 'eval-source-map',
    //項目的文件夾 可以直接用文件夾名稱 默認會找index.js 也可以確定是哪個文件名字
    entry: {
        index: INDEX
    },
    //輸出的文件名 合并以后的js會命名為bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'js/[name].min.js'
    },

    resolve: {
        extensions: [ '.jsx', '.js', '.json'],

    },
    plugins: [
        new FastUglifyJsPlugin({
            compress: {
                warnings: false,
            }

        }),
        new webpack.optimize.UglifyJsPlugin()

    ],

    module: {//在配置文件里添加JSON loader
        loaders: [
            {test: /\.json$/, loader: "json-loader"},
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: "file-loader?name=images/[hash:8].[name].[ext]"},//圖片打包配置
            {
                test: /\.js$/,
                loader: "babel-loader"
            }


        ]
    },
    devServer: {
        contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
        // colors: true,//終端中輸出結(jié)果為彩色
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true//實時刷新
    },

};

7.安裝webpack-dev-server node服務器,本地調(diào)試使用

 npm install --save-dev webpack-dev-server

8.打開瀏覽器訪問 http://localhost:8081/

image.png

大功告成！

Demo地址: =====>GitHub

有什么問題可以留言