搭建React项目从0到1（1）

准备工作：

安装  npm  安装地址 http://npm.taobao.org/
安装  node 安装地址 https://nodejs.org/zh-cn/
复制代码

查看 npm 的版本号  npm -v    最新版  v5.6.0
查看 node 的版本号  node -v  最新版  v10.1.0
复制代码

需要掌握：

 react 的相关知识(jsx的语法等)
 es6 的相关知识  
复制代码

使用的编辑器 vscode 下载地址 ：XXXX

新建一个文件夹 react-demo

打开终端

安装  package.json 文件      npm init  
按照步骤一步步的往下走,都可以不填
作者可以写上自己的名字
安装成功之后会出现package.json的文件
复制代码

安装React相关的

npm i --save react    ----->   依次 安装  npm i --save react-dom
需要引入  react 和 react-dom 等一些基础依赖
复制代码

安装打包工具

webpack 和 webpack-dev-server(express服务器，支持热加载)
npm i --save-dev webpack webpack-dev-server
打包工具可以将我们的代码进行压缩
将ES6、ES7 转换成浏览器看得懂的ES5，将JSX、Less、Css用loader装换等
最后打包到特定的文件夹,作为发布的版本 ，
复制代码

安装babel 相关的依赖

  官网参考： http://babeljs.io/
  npm i --save-dev babel-polyfill babel-loader babel-runtime babel-plugin-transform-runtime babel-preset-es2015 babel-preset-react babel-preset-stage-2
复制代码

添加命令

package.json  添加编译和打包的 命令  
script  创建npm 的命令行 
build 代表项目 的打包 会生成打包好的文件夹，可以直接部署访问
start 属于本地构建，本地用 webpack-dev-server 起一个服务，便于开发的访问调试更新等  
--config  config文件    
复制代码

添加打包文件

创建 webpack.config.js   和 webpack-dev.config.js   
必要的安装的loader   ---> babel-loader    css-loader  style-loader  less-loader 
(注意   npm i --save less-loader less)
复制代码

根目录生成html -- vscode 快速生成 html ！+tab

新建src 文件夹 新建根文件 app.js

  要想获取到#app ，需要创建一个 html的模板，在html-webpack-plugin 上配置
  如果没有html的模板，就创建一个元素  然后挂载到body上；
复制代码

提示 安装 参考 segmentfault.com/a/119000001…

安装  npm i --save html-webpack-plugin   
(自动热部署 , 自动生成 html，只存在内存里面） 
 可以自定义一个 template 作为 html的 模板  也可以不写 
复制代码

在webpack.config.js 上 添加插件配置  
  entry 入口文件
  output 输出文件
复制代码

执行 start ----->  npm start     
    如果成功的话 可以通过  http://localhost:8080/  进行访问   
    如果不成功的话，要注意看给你的错误提示，有可能是你的某个单词或者某个文件配置的不对，注意看错误，尝试自我解决。
复制代码

----------结束 祝你成功~！！！-----------

转载于:https://juejin.im/post/5b798a906fb9a019e270f969