React开发学习(一)：环境搭建

前言：React是一个非常棒的用于构建用户界面的Javascript库。

image

项目环境

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 如果你没安装，可以点击==>

NPM Node.js的包管理器 npm，是全球最大的开源库生态系统。去安装===>

假如你们这两个环境已经配置好，那么快和我一起开始React之旅吧

==开发工具:== WebStorm

==系统:== Mac os

==脚手架== webpack

cd/项目根目录

npm init!

image.png初始化完成后你会发现多处一个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

在项目根目录新建一个.babelrc文件，配置如下：

image.png

4.安装React、React-dom

npm install --save-dev react react-dom

4.新建html文件，项目目录结构如下：

image.png

html内容：加一个

对react进行渲染

image.png

5.新建js文件，写一个React的hello world

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
    render(){
        return(
            
Hello World!
        );
    };
}
ReactDom.render(,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,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },

};

7.安装webpack-dev-server node服务器,本地调试使用

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

8.打开浏览器访问 http://localhost:8081/

image.png

大功告成！

Demo地址: =====>GitHub

有什么问题可以留言