3个用于前端开发的最佳JavaScript框架/库

本文概述

  • React
  • Vue.js
  • Angular
多年来, JavaScript越来越流行, 社区迅速发展, 开发人员每天都在不断开发和构建用于该语言的工具。
在决定要用于特定任务的工具/框架/库时, 这使你不知所措, 因为你实际上想要在JavaScript中执行的所有操作都有多个选项。首先, 决定学习哪种库或框架仍然是一项挑战。
本文着重于揭开使用多个JavaScript前端框架/库的优势的神秘面纱, 并最终对它们进行更清晰的描述。目的是使选择一个的决策过程更加容易。
React
3个用于前端开发的最佳JavaScript框架/库

文章图片
React不是一个框架, 而是一个用于构建用户界面的JavaScript库。
它是开源的, 由Facebook和个人开发者社区维护。 React最初是由Jordan Walke在Facebook上作为内部工具编写的。它后来是开源的, 并于2013年向公众发布, 此后便获得了广泛的欢迎。
其中一些功能包括以下内容。
  • 提供可响应, 可自定义和可重用的组件
  • 利用虚拟DOM
  • 极快
  • 基于组件
  • 单向数据绑定
  • 代码可重用性
  • 它背后有一个生机勃勃的生态系统
  • 方便的状态管理
安装/使用
React可以两种不同的方式用于前端。
  • 通过CDN
  • 使用Node.JS
通过CDN
你可以参考他们的官方网站以获取脚本链接, 你可以将其包含在HTML标记的标头标记中。根据目的选择链接。
例如, 如果在开发环境中使用, 则:
< script crossorigin src="https://unpkg.com/[email  protected]/umd/react.development.js"> < /script> < script crossorigin src="https://unpkg.com/[email  protected]/umd/react-dom.development.js"> < /script>

并且, 用于生产
< script crossorigin src="https://unpkg.com/[email  protected]/umd/react.production.min.js"> < /script> < script crossorigin src="https://unpkg.com/[email  protected]/umd/react-dom.production.min.js"> < /script>

使用Node.JS
我假设你已经安装了NodeJS。要安装React, 只需键入以下命令。
须藤npm我-g create-react-app – save-dev
【3个用于前端开发的最佳JavaScript框架/库】安装完成后, 键入以下命令
创建React应用程序我的第一个React应用程序
上面的命令将安装React正常运行所需的所有必需库, 其中包括开发服务器, webpack和babel。
导航到my-first-react-application文件夹并运行以下命令
asl开始
上面的代码将在端口3000上启动开发服务器。然后, 当你使用端口3000访问服务器IP时, 应该会看到类似下面的内容。
3个用于前端开发的最佳JavaScript框架/库

文章图片
React正在受到许多大型组织的欢迎和需求。如果你对学习感兴趣, 那么我建议你修读完整的课程。
Vue.js
3个用于前端开发的最佳JavaScript框架/库

文章图片
Vue.js是一个渐进式JavaScript框架, 用于构建交互式用户界面和单页应用程序。这是一个带有核心库的模型视图框架, 专注于视图层。 Vue之所以受欢迎, 是因为它具有驱动单页应用程序的能力。与React不同, Vue使用原始HTML而不是JSX。
Vue.js是开源的, 最初由Evan You创建并于2014年2月公开发布。以下是其中的一些功能。
  • 它提供了可响应的可组合视图组件。
  • 利用虚拟DOM
  • 专注于核心库(即路由和状态管理)
  • CSS中的作用域处理无需CSS-In-Js
  • 组件内的单向绑定。
  • 支持基本插件
  • 代码可重用性
安装/使用
你可以通过CDN或与Node.js一起在前端使用Vue.js
要使用CDN方式, 可以将以下脚本添加到HTML页面标题部分。
< script src="http://img.readke.com/220515/1022456054-7.jpg"> < /script>

上面的脚本包含重要的控制台消息, 适合用于开发目的。但是, 对于生产, 你应该使用以下之一。
< script src="http://img.readke.com/220515/1022454113-8.jpg"> < /script>

并且, 要与Nodejs一起使用, 可以使用npm命令安装它。
npm install vue

我强烈建议你阅读Vue JS官方文档以了解更多信息或考虑采用此方法。
Angular
3个用于前端开发的最佳JavaScript框架/库

文章图片
Angular是用于动态页面的结构化JavaScript框架。它允许将HTML用作模板语言, 并允许使用HTML语法来清晰, 简洁地表达应用程序组件。这是一个由Google和其他贡献者维护的开源项目。
安装
确保你已安装最新的Node.js。我们需要安装的第一件事是Angular CLI工具。
npm install -g @ angular / cli
安装后, 我们可以使用以下命令创建一个新项目。
ng new my-first-angular-app

按照屏幕上的说明进行操作。这将生成一些文件和文件夹, 并使用npm模块下载Angular正常运行所需的第三方库。
要启动新创建的应用程序, 请从apps文件夹中运行以下命令。
ng server

这将自动在端口4200上启动服务器。
[[email  protected] my-first-angular-app]# ng serve 10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/ ? ?wds?: webpack output is served from / ? ?wds?: 404s will fallback to //index.htmlchunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ? ?wdm?: Compiled successfully.

总结
因此, 你选择学习的东西更多的是个人喜好, 而不是” 这是更好的” 东西。
上面列出的所有框架/库都很棒。这是一个简短的回顾;
  • 如果你想要一个无需处理外部依赖关系即可依赖的框架, 则应该学习Angular。
  • 如果你想构建快速, PWA, 单页应用程序, 并且对JSX感到满意, 则应该学习React。
  • 由于拥有庞大的社区, React拥有最活跃的社区和更多的就业机会。
  • React相对容易上手。
  • React是高度可定制的, 并将每个UI都视为一个组件。
  • Vue具有与React相同的优点, 但没有JSX。
  • Vue的就业市场在不断增长。
这是Google趋势上的图表, 显示了其中三种流行率的比较。
3个用于前端开发的最佳JavaScript框架/库

文章图片
如果前端开发是你的兴趣所在, 那么你可以查看此Udemy课程。

    推荐阅读