首页 > 代码库 > react大前端开发之超简说明(站在巨人的肩上)

react大前端开发之超简说明(站在巨人的肩上)

1、前戏准备充分(包括但不限于):安装最新node.js环境,安装好VScode

2、npm init,初始化node.js项目,会生成package.json文件

3、npm install hapi,安装node.js的web服务器

4、npm install inert,让上一部安装的hapi服务器可以返回静态文件,比如JS啊,静态html啊,图片啊,css啊之类的东西(bullshit),还要在等下的server.js里添加上注册代码。

5、hapi官网:http://hapijs.com/,点头部导航第二个-Tutorials(学习指南),再点右边的Tutorials最下面的一个Views,找到下面比较完成的reply.view的代码,自己用。

6、在项目根目录下,就是与刚刚的package.json同级的目录,添加一个server.js文件(其实文件名随意取),将刚刚的代码弄进去。代码还比较容易理解。

7、npm install --save handlebars vision,

8、再node server.js差不多可以运行了,有问题的话稍微改下

9、安装webpack,npm install webpack --save-dev,如果没有全局安装过的话请再全局安装一下npm install webpack -g,简单使用可参考简书上的webpack入门说明:http://www.jianshu.com/p/42e11515c10f。我这里只用它来编译ES6,并将多个JS打包成一整个的JS。

10、建立webpack.config.js,与package.json同级目录。代码内容自己找,txt实在难放代码。

11、安装babel,npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react,这里安装了好几个东西,我也不太分得清,凑合安吧。

12、完成后执行webpack,神奇的发现,scripts下生成了一个bundle.js。至此,呵呵,手动微笑。

13、再在index.html下加载一下这个js,按正常写加载就行,如果加载失败返回403之类的,肯定就是第4部后面说的注册inert姿势不正确,或者根本没有注册。再node server.js一下,刷一下index页面,正常加载js,再次手动微笑。

14、安装react全家桶,npm install --save react react-dom redux react-redux,一口气安4个东西脸不红心不跳气也不喘(其实TM蛋疼,没办法再难过也要微笑哦)。

环境搞好了,差不多可以愉快的开始react开发了,本文最后一次手动微笑^_^

仅以此作为记录与分享,谢谢

react大前端开发之超简说明(站在巨人的肩上)