第一种方法：使用react脚手架

1. 全局安装create-react-app脚手架

npm install create-react-app -g

2. 创建项目，安装依赖

create-react-app my-new-app 
cd my-new-app
npm start  // 运行
npm run build //打包生产文件
// npm install --save react react-dom  ( 在该目录下导入react和react-dom）
// npm install --save  react-router-dom   （react路由，以后会用到）

直接打包的生产文件，用浏览器直接打开，不用localhost这种方式，是打不开的，打开浏览器调试，发现报错了，找不到打包后产生的文件，因为里面使用的的根目录路径，应该改成相对路径'./' 。
怎么改呢？
当前目录下，仔细找找，发现根本没有webpack文件，那么首先要把webpack配置文件暴露出来。
执行：npm run eject
这是一个不可逆的反编译操作，执行后，发现有了webpack配置文件。

config/path.js

1. package.json 中加一个键值对：'homePage'：'.'
2. scripts/build.js process.env.PUBLIC_URL = '.'

npm run build默认输出的生产文件存放在根目录下的build文件夹里面，如果项把文件夹名字改成dist,需要到config/path.js中修改：

module.exports = {
...
appbuild:resolveApp('dist'), // build 改成 dist
...
}

第二种方法：使用webpack安装

1. 创建项目

cd react-demo1
npm init

2. 安装依赖

npm install react react-dom --save
npm install  react-router-dom --save

npm install webpack webpack-cli --save-dev 
npm install less --save-dev
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
npm install webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev
npm install --save-dev extract-text-webpack-plugin  //配置CSS分离
css-loader url-loader file-loader postcss-loader

其他依赖

npm install echarts --save
npm install bodymovin --save //动画