搭建React项目从0到1(1)

1,191 阅读2分钟

准备工作:

安装  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/  进行访问   
    如果不成功的话,要注意看给你的错误提示,有可能是你的某个单词或者某个文件配置的不对,注意看错误,尝试自我解决。

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