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开发了,本文最后一次手动微笑^_^

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

时间: 2024-10-05 05:43:01

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

介绍三款大前端UI框架

一.蚂蚁金服团队推出的基于React antd (全名:ant.design) 友情跳链:https://ant.design/index-cn:使用antd模板:https://pro.ant.design/ (基于react) 优点: 不言而喻,阿里的蚂蚁金服团队,在前端组件UI上是下足了功底,喜欢开箱即用的可以直接使用,当然该组件不仅仅局限于使用react,同时你可以选用Vue与angular版本去搭配使用. 技术文档:VUE+antd  :  https://vue.ant.design

ionic中文教程[来自皓眸大前端]

做前端的同学有福了,学完比较热火的angular,你就可以开始动手做静态的WebApp了,这是多么幸福的一件事啊.静态的WebApp,你可以做任何的Demo,甚至可以做一些通关小游戏这个先不谈.做完了WebApp之后,神器IonicFramework来了,只要你的App没有涉及像多媒体处理,特殊传感器的处理,你都可以通过ionic打包成apk或ios应用,不用改写或者改写小部分代码.这是多么神奇哈! 皓眸大前端开发学习 转载请注明出处:http://www.haomou.net/2014/10/

大前端与前后端分离

一.大前端 简单来说,大前端就是所有前端的统称,比如Android.iOS.web.Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端.大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心.大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序. 由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来.所以当开发一个新产品的时候服务只需要写一次

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

大搜车前端开发模式:被动编译和主动编译

最近,梳理了一下公司的前端开发体系,准备给已经工作一年多的原有体系引入一些新的开发模式,其实也不算新了,只是对于我们一直采用的模式来说,是两个完全不同的方向,以前,我崇尚简单,一直按照简单易用的理念构建了公司现有的前端开发体系,现在随着人数的增多和业务的复杂度提升,感觉是时候引入一些差异化的开发体系了. 说来说去有点绕的慌,上面一段中说的 传统的开发模式,在团队内部我们叫做 被动编译,而新的开发方式,在团队内部叫做 主动编译. 被动编译 可能很多人对于被动编译都不是很熟悉,因为这种开发方式现在并

web前端开发——react入门

一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具.React是MVC中的V层,是视图层面的一个框架.React是创建虚拟dom(vi

极客Web前端开发资源大荟萃#002

每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习. #GB课程库# 极客Web前端开发资源大荟萃#001 如何写出高性能的Jquery代码 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染和响应意味着更好的用

极客Web前端开发资源大荟萃

每周极客都将总结本周最精彩的素材提供给大家.希望能够带给你很多其它地灵感和帮助.极客#GB课程库#现已上线,不管你是0基础.中级.还是正在进修的高级前端project师.这里都将帮助你得到很多其它更高效的学习. #GB课程库# 极客Web前端开发资源大荟萃#001 怎样写出高性能的Jquery代码 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议.来提升你的jQuery和javascript代码.好的代码会带来速度的提升.高速渲染

极客Web前端开发资源大荟萃#22

本周,给大家总结了一些比较精彩的干货资源,点击橙色文字可以查看往期资源荟萃.本周的文章涉及的面比较广,内容也很丰富,大家可以收藏起来,然后慢慢学习-感谢大家对极客标签的支持,有任何意见或建议,都可以在评论区表达- 1.高效设计构建软件的十三条建议 非常全面的建议,值得参考- 大家在思路混乱的时候可以仔细阅读其中的内容哦,也许会让你的思路豁然开朗- 2. 程序员的电脑桌面是什么样的? 这是一篇桌面征集帖-想要了解程序员电脑桌面的,可以点进来看看哦,非常有意思- 3.幽灵按钮-极简主义的网站设计趋势