如何开始一个react项目

1、新建目录——>在dos窗口进入到目录路径下，输入npm init   //进行初始化

初始化时packname和entry point（入口文件）需要输入值，其余的可以不输值

完成后1-1目录下会生成一个package.json的配置文件，里面即是包的初始化信息

1. 安装必要的组件react-dom 和babelify

npm install --save react react-dom babelify babel-preset-react

再安装babel es2015

npm install babel-preset-es2015 --save

1. 在项目根目录下新建一个目录，存放源代码，比如入口文件index.js——>在根目录下新建一个index.html（引入index.js）

【index.js】

var React=require('react');

var ReactDom=require('react-dom');

ReactDom.render(

    <h1>hellow world!</h1>,

    document.getElementById("example") //这里不能写；

);

【index.html】

<div id="example">123</div>

此时运行会报错，因为浏览器无法识别index.js中的语句，必须经过webpack打包

1. 在根目录下新建一个webpack.config.js文件（文件名是固定的）

var webpack=require('webpack');

var path=require('path'); //引入相关包

 

module.exports={

    context: __dirname+'/src',

    entry:"./js/index.js", //入口文件

    module:{

        loaders:[{

            test: /\.js?$/, //解析所有的js文件

            exclude: /(node_modules)/, //跳过node_modules文件夹

            loader: 'babel-loader',

            query: {

                presets: ['react','es2015']

            }

        }]

    },

    output: {

        path: __dirname+"/src/",

        filename: "bundle.js"

    }

};

1. 安装webpack相关的包

先全局安装 npm install -g webpack

全局安装webpack安装的服务器 npm install -g webpack-dev-server

在再项目中安装包

npm install webpack --save

npm install webpack-dev-server --save

1. 在dos下运行webpack

提示需要安装webpack-cil

安装好webpack-cil后继续运行webpack再次报错……

查阅资料，说是webpack版本过高引起的

npm查看插件版本列表：npm view 插件名 versions

重新安装webpack 3.1.0的版本，然后又出现了错误……

在dos中继续输入npm install babel-loader --save

生成了bundle.js，不过又有一大堆错误

然后输入

npm install --save-dev @babel/core，运行webpack报错……

npm install -g babel-cli@6.26.0，继续报错……

嗯……还是版本问题，参考网址https://www.cnblogs.com/jiebba/p/9618930.html

我packag.json中的babel-cli版本是6.26.0，而babel-loader是8点多，因此继续在dos中输入

npm install babel-loader@6.4.1 --save，再次运行webpack，终于没有报错了，前台也正确运行出hello world了……