React框架学习_关于React两种构建应用方式选择

时间: 2018-01-19阅读: 1276标签: React
作者:@EasonPeng
本文为作者原创,转载请注明出处:https://www.cnblogs.com/eason-peng/p/8315185.html


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应用。

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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/373

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React ref

React ref理解:通过指定ref获得你想操作的元素,然后进行修改.是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。 因为ref引用的是组件的实例

React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这些内容已经非常清楚,那么略过本文即可。

React新Context API在前端状态管理的实践

众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着React 16.3的发布,新context api成为了新的选择。

react-router v4 按需加载的配置方法

在react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的,以下是配置按需加载的方法

Context - React跨组件访问数据的利器

Context提供了一种跨组件访问数据的方法。它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数。在经典的React应用中,数据是父组件通过props向子组件传递的

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

React列表中实现文案多行收起展开的功能

在我们平时的业务开发中经常会用到文案超出只有收起,点击在展示全部文案;通常的使用时使用css来实现

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广