经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法。这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学习方向。

1. 传统模式构建

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。这样在这个前端项目中,默认生成或者是定义全局变量,从而使用js各种开发包的特性。典型代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
...
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>>
...
</head>
<body>
...
<script type="text/javascript">
$("div.test").onclick(function(){
// code goes ...
})
</script>
</body>
</html>

这种方法构建的前端项目,显而易见很迅速,可以简单、直接的完成前端想要的各种逻辑。比如,我要控制一个div的显示,直接通过Jquery的selector操作,就可以完成。为了符合众多前端er的习惯,React也提供了类似的方案,可以说这个对于初学React的朋友来说非常方便。

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="scripts/react.development.js"></script>
<script src="scripts/react-dom.development.js"></script>
<script src="scripts/babel.min.js"></script>
</head> <body>
<div id="root"></div>
<script type="text/babel"> ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); </script>
</body> </html>

而然随着互联网的发展,越来越多的网站开始变得臃肿、庞大,诸如淘宝网、facebook网站的逻辑相当复杂。对于网站处理逻辑非常繁多,渐渐地使用传统模式构建,会使项目难以更新feature,寻找bug也会非常麻烦。项目的更新、维护,对于团队的压力可想而知。因此,目前前端界的共识是使用Webpack+babel的构建模式。

2. Webpack+babel模式构建

随着JavaScript语言下一代标准的愈发成熟,ES6,即ECMAScript2015(ES2015)受到越来越多的开发者欢迎。为了弥补当前浏览器不支持ES6的缺陷,babel孕育而生,它是JavaScript的一个编译器,是用户能够在浏览器中体验下一代JavaScript语言的魅力。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

React官方将这两个工具封装在了名为create-react-app的脚手架中,按照官网的说法,create-react-app适合搭建单页面应用[详细信息]

初学React的小白用户,可以使用简单的指令,它将启动webpack-dev-server的HTTP Server。在这个服务器中,提供了babel的配置。

npx create-react-app my-app
cd my-app
npm start

npx为一个类似npm的cli工具,目的是管理本地的第三方工具集[介绍]

由于create-react-app提供了良好的封装,这些服务启动的过程,使用者是无法察觉的。要了解create-react-app启动的全工程,用户可以从这个教程了解。

当然create-react-app也提供了用户自定义的webpack和babel配置。只要输入下列指令(该指令不可逆):

npm run eject

3. 总结

对比两种不同的React构建方法,使用的目的也不一样。第一种方法提供了更为灵活多变的应用特效方案,适应于展示特效多的应用,如小游戏、H5广告等。而第二种方法适用于构建中大型Web app应用。

对于前端学习者来说,推荐使用第二种方法,毕竟这属于目前前端的趋势。有利于开发者适应大规模开发。潜台词就是更容易在大厂商找到工作!!!

五分钟学习React(五):React两种构建应用方式选择的更多相关文章

  1. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  2. 五分钟学习React(一): 什么是React

    在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...

  3. redis笔记之两种持久化备份方式(RDB & AOF)

    Redis支持的两种持久化备份方式(RDB & AOF) redis支持两种持久化方式,一种是RDB,一种是AOF. RDB是根据指定的规则定时将内存中的数据备份到硬盘上,AOF是在每次执行命 ...

  4. 牛客网Java刷题知识点之Map的两种取值方式keySet和entrySet、HashMap 、Hashtable、TreeMap、LinkedHashMap、ConcurrentHashMap 、WeakHashMap

    不多说,直接上干货! 这篇我是从整体出发去写的. 牛客网Java刷题知识点之Java 集合框架的构成.集合框架中的迭代器Iterator.集合框架中的集合接口Collection(List和Set). ...

  5. 关于VAD的两种内存隐藏方式

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 技术学习来源:火哥(QQ:471194425) 内存在0环的两种内 ...

  6. Oracle数据库的两种授权收费方式介绍!

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  7. Windows Azure VM的两种shut down 方式

    今天在调查Azure的价格时,发现下面的语句,来自http://azure.microsoft.com/en-us/pricing/details/virtual-machines/ * If my ...

  8. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

  9. Linux共享库两种加载方式简述

      Linux共享库两种加载方式简述  动态库技术通常能减少程序的大小,节省空间,提高效率,具有很高的灵活性,对于升级软件版本也更加容易.与静态库不同,动态库里面的函数不是执行程序本身 的一部分,而是 ...

随机推荐

  1. BZOJ3238:[AHOI 2013]差异

    求一个字符串的∑ ∑ len[i] + len[j] - 2 * lcp(i, j),其中i,j表示从i,j开始的后缀. 方法一:SA+单调栈,自行yy. 方法二:SAM构造出来,然后每个状态对答案的 ...

  2. 1067 Bash游戏 V2

    有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出N,问最后谁能赢得比赛. 例如N = 2.A只能 ...

  3. HDU——4738 Caocao's Bridges

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. Luca Canali

    https://github.com/LucaCanali http://cern.ch/canali/

  5. 【Spring四】AOP之XML配置

    AOP:Aspect Oriented  Programming 面向切面编程 面向切面编程的核心是动态代理设计模式.请先參见动态代理设计模式笔记. 以Hibernate保存一个对象到数据库为例,因为 ...

  6. HDU 1255 覆盖的面积(线段树+扫描线)

    题目地址:HDU 1255 这题跟面积并的方法非常像,仅仅只是须要再加一个变量. 刚開始我以为直接用那个变量即可,仅仅只是推断是否大于0改成推断是否大于1.可是后来发现了个问题,由于这个没有下放,没延 ...

  7. mysql 存储引擎的选择你会吗?

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXExMzU1NTQxNDQ4/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  8. B. Case of Fake Numbers( Codeforces Round #310 (Div. 2) 简单题)

    B. Case of Fake Numbers time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  9. TLabel和TEdit的初次显示过程

    procedure TForm1.Button2Click(Sender: TObject); var l: TLabel;begin l:=TLabel.Create(self); l.Name:= ...

  10. audio_device模块分析

    1. 对外接口      AudioDeviceModule, 採音放音接口,音量控制,静音控制等       2. 主要类      AudioDeviceModuleImpl, 对外提供的主要实现 ...