目标:react及webpack的环境的搭建。
简介
react本身是由少量API构成的一个web库。目前官方建议使用语法为ES6。
使用到的工具
- webpack
正如官网对 Webpack 的描述,它是一种模块化加载器,当然也不仅仅限于此。某种程度上来说,可以代替某些gulp的功能,至少有些还是无法替代的。在webpack中所有的资源都会被视作模块来处理,为了应对这样的情况,webpack有对应的loader机制来处理,另外shim,plugins,和其他构建工具,一样一样的,更多的细节,需要你在实际的应用中慢慢去体会了。
- babel
Babel 是一个 JavaScript 编译器,用于将你的ES2016代码转换成ES6跑在浏览器中。
- npm包依赖管理
做为Node世界里的包管理器,我想大家从Grunt时代起就已经熟练的使用npm install命令来安装一些依赖完成前端自动化构建任务。
nodemon和koa
nodemon可以用来监控文件并且重启Node服务器,koa是Node世界里的一个Web开发框架。由于kodo项目用koa写了一个静态服务器,所以且需要使用它。如果你有 browser-sync 的使用经验,你可以替换成它。
Let's start!
安装webpack
再次之前已经安装好了node.js
npm install webpack -g
webpack也有一个web服务器webpack-dev-server。
npm install webpeak-dev-server
上述安装完成后:
有两个选择去开始react项目。
选择一:安装并使用creacte-react-app快速构建react开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
然后在浏览器中打开http://localhost:3000,结果如下图所示
文件目录如下所示:
选择二:自己一步一步手动来弄
由于我自己没有弄成功,所以暂时不写了,等弄好后更新这部分。