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

时间: 2018-01-19阅读: 1148标签: 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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

从 React 切换到 Vue.js

React 和 Vue 的关系有点像可口可乐和百事可乐,你在 React 中做的很多事情都可以在 Vue 中完成。当然这里也存在一些重要的概念差异,其中一些反映了 Angular 对 Vue 的影响。

React常用hook的优化useEffect浅比较

先说说react原版的useEffect使用起来不便的地方,这里的effect每次更新都会执行,因为第三个参数一直是不等的,第二是在deps依赖很多的时候是真的麻烦

react依赖node吗?

学习React前提必须拥有Javascript和DOM知识。这个门槛已经很低了。但是很多的教程里面都提到npm,nodejs.要先安装nodejs。但是react并不依赖node。

React setState 这样用,开发直呼内行!

众所周知, React 是通过管理状态来实现对组件的管理,而setState是用于改变状态的最基本的一个方法,虽然基础,但是其实并不容易掌握,本文将结合部分源码对这个方法做一个相对深入的解析。

使用react-app-rewired和customize-cra对默认webpack自定义配置

最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章

新手学习 react 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的

10分钟快速了解 React 基础

如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。使用 create-react-app 工具快速创建 React SPA。render 函数中提到了 JSX,简单的看,就是一个可以在 js 中写 html

如何使用React搭建前端?

首先说明node.js、npm、cnpm分别是做什么的?node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm -v查看是否安装。

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

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

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

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