-5f110148e700 翻译 | 杨小爱 01、React 地址：https://reactjs.org/ React 是一个开源 JavaScript 库，用于为 Web 应用程序构建界面。...我喜欢这个库的一点是，您可以通过删除在下载过程中不使用的编程语言来减少 highlight.js 的大小。 对于服务器端，您可以使用 yarn 或 npm 来安装它。...如果您需要创建事件计时器、促销活动、筹款活动，我认为这是最适合您的库。...它允许您为您的网站轻松构建日期选择器组件，而无需任何额外的使用或任何额外的库。 我喜欢这个库中的一些功能是深色和浅色主题。您可以设置允许用户选择的时间间隔，按地区设置日期等。...此外，它还拥有庞大的程序员支持社区，以及许多详细的说明和示例。公司以及大型网站都信任并使用它。 总结 我希望这篇文章能为您提供用于网页设计和开发的有用的 JavaScript 库。
事实上, 我做这个关于 State Of JavaScript 的调查最主要的原因是想要找出哪些库是真正流行的，然后对这些流行的库排个序。...如果你已经能用一些像PHP，Python这样的语言完成后端工作，又或者能用一些前端的库实现一些简单的操作，例如JQuery。 如果你想在前端更上一层楼，却又被各种框架和库困扰得不知从何开始。...如果你 google 搜索“Learn JavaScript”或“JavaScript study plan”，你会发现一大堆结果是教你如何学习 JavaScript 这门语言本身。...React 会让你认识到一些像组件、应用程序状态、无状态的函数式组件等概念，这些概念对你以后都会有所帮助，即使你以后是在使用其他的框架或库。...第2周：你的第一个 React 项目 假设你刚完成了 React 的课程，如果你跟我一样的话，下面两件事准没错： 你已经快把你刚学的知识忘掉一半了 你迫不及待地想用实践的方法去记住还没忘掉的另一半 我认为学习一个框架或一门语言的最佳方式就是使用它
最终我希望 React 受到 Vue.js 所做的这些事情的启发，并且也开始这样做。 不同的理念 Vue.js 和 React 之间的主要区别之一是它们如何称呼自己。...React 把自己描述为 “一个用于构建用户界面的JavaScript库”，而 Vue.js 则把自己描述为“渐进式JavaScript框架” React 是一个库，Vue.js 是一个框架。...如果你想在 React 中执行这样的操作，可以创建一个辅助函数或一个自定义组件。但与指令修饰符相比并不简洁。...这样做的好处是，你不需要关心数据是如何同步的，你只需要关心它是如何为你服务的。...自定义指令 像任何好的框架一样，你可以在 Vue.js 中创建自己的自定义指令。
现在，我可以使用 Angular 创建世界上最好的组件，并将它交给我的朋友，她将它用在她的 React 应用程序中！...这将在 2019 年真正改变服务器端渲染，我预测会有更多人使用像 GatsbyJS 这样的工具，而不是自己构建复杂的服务器端渲染逻辑。...你应该学习如何构建 PWA，并使用像 Lighthouse 这样的工具来测试它。 Safari 最终为 PWA 添加了一些支持，实现渐进式 Web 应用程序功能可能会更容易一些。...2019 年，像 PostgreSQL 这样的数据库将继续发展，而像 MongoDB 这样的 NoSQL 数据库似乎会有所下降。...但这可能是最重要的主题，而且我可以非常自信地说，这个趋势具有 99.99999％的准确率：如果你想在 2019 年和未来几年成为一个全栈开发者，计算机科学基础是非常重要的。
讽刺的是，我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何？ 本文中这些坑对于你正常使用 React 并不是很重要。...接下来我们试一试： ---- 在 JavaScript 中，super 指的是父类的构造函数。（在我们的示例中，它指向React.Component的实现。）...重要的是，在调用父类构造函数之前，你不能在构造函数中使用this。 JavaScript 是不会让你这样做的： ?...如你所见，像这样的代码很难想到问题出在哪里。 为了避免这类陷阱，JavaScript 强制要求：如果想在构造函数中使用this，你必须首先调用super。 先让父类做完自己的事！...这允许在像 state = {} 这样的表达式中包含对 this.props或 this.context 的引用（如果有必要的话）。
RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。 另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...作为开发者如果你想在2018年脱颖而出，那就在面试的时候用Storybook展示你的最新项目。...由Airbnb工程团队开发的Enzyme是一个测试React组件的JavaScript库。自从2016年以来它已经在GitHub上面拿到了12000颗星。...现在，我意识到在一句话里面用这两个词对推销这个日益流行的库并没有帮助。 但你对这个库的研究越深，你就越会发现有一群人对jQuery和Falsh都有极深的抱怨，迫切需要让情况变好一点。
从那以后，我对 JavaScript 的了解以及一般的编程方式得到了很大的提高，我花了很多时间深入研究每天在工作种或在自己的项目中使用的库。在本文中，我将分享一些分析库或框架的方法。 ?...我最近研究过的模块捆绑包 Parcel 也有像 React 这样的 packages 文件夹。密钥模块名为 parcel-bundler，它包含负责创建捆绑包、热启动模块服务器和命令行工具的代码。...如果 README 没有给我一个满意的解释，我就会阅读源代码。这样做让我得到了一些有趣的发现： Express 依赖两个模块，这两个模块都可以合并对象，但是合并方式的差异很大。...看完之后，我会问下列问题： 我知不知道函数接受输入的那些模式或概念，然后返回包含其他功能的相同输入？ 如果我知道此类模式，又将如何根据文档中给出的解释实现此模式？...但是在这种情况下，我选择使用我们在 Limejump （https://limejump.com/）上构建的新 React 程序，因为我想在程序的上下文中理解 connect，最终再进入生产环境。
React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大，相对来说很容易获取和使用。 React和Vue的共性： 使用虚拟DOM。 提供响应式视图组件。...使用Vue模板就像是用JSX就是他们都是创建使用JavaScript。主要的区别是，JSX函数在实际的HTML文件中从来不被使用，而Vue模板不是这样。...这个div会像它在React中那样起作用。它会告诉JavaScript库，在这个示例中，开始改变的时候在哪里观察DOM。 一旦这样做了，你将创建一个JavaScript文件，将存放Vue代码。...现在你已经准备好你的文件，让我们看看Vue如何显示元素到浏览器。 Vue使用模板的方法用它来操作DOM。这意味着你的HTML文件不仅会有一个空的div，比如在React中。...无论哪种方式，Vue和React都是两个功能强大的库，你使用任何一个都不会有问题。 如果你觉得这篇文章很有帮助，给我一些掌声。 你可以在Twitter上跟踪我！
在这个由两部分组成的系列中，我想将CSS放在聚光灯下，并探索弥合它与JavaScript之间的差距。在本系列中，我将假设您正在使用像webpack这样的模块解析器。...因此，我将在我的示例中使用React，但相同或类似的原则适用于其他JavaScript框架，包括Vue。 CSS领域正朝着多个方向发展，因为要解决许多挑战并且没有“正确”的路径。...可重用性 重用规则集，媒体查询等是我最近很少看到的一个主题，因为它已经被Sass和Less等预处理器解决了。 但是我仍然想在这个系列中再次提起它。...它会像这样使用： <Photo publicId="balloons" alt="Hot air balloons!"...此特定示例演示了如何将媒体查询保存在变量中并在多个位置重用它。响应式图像是一个很好的用例，因为sizes属性基本上包含CSS，所以我们可以使用JavaScript来使代码更简洁。
然而，我觉得最近的公告使React初学者和想采用React的公司处于不利地位。因此，我想在这里给他们提供更多不同的选择，作为逃生通道。...像TypeScript、ESLint、SVG和SSR这样的可选功能只需在Vite的vite.config.js文件中进行一些配置，除此之外还可以在一些特定功能文件中进行配置（如tsconfig）。...Next的优点 带有内置库的框架 SSR和许多其他渲染技术 性能提升（注意：如果处理正确的话） 与CSR相比，SEO得到改善 Vercel是拥有大量资金的大公司 与React核心团队紧密合作 有许多React...SSR项目的选择： SvelteKit SolidStart QwikCity 如何开启React项目 如果你开始学习React（从教育者的角度），我建议使用Vite，因为它尽可能地接近React的基本原理...如果你想在React的基础上寻找一个有主见的框架，并包含几种渲染技术（和基础设施），我会推荐使用Next，因为它是最成熟的解决方案，有所有的优点和缺点。
RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。 另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...作为开发者如果你想在2018年脱颖而出，那就在面试的时候用Storybook展示你的最新项目。...尽管简化配置和改善速度都是很好的改进，如果2018年上半年Webpack没有抄这些改进的话我不会感到奇怪。...现在，我意识到在一句话里面用这两个词对推销这个日益流行的库并没有帮助。 但你对这个库的研究越深，你就越会发现有一群人对jQuery和Falsh都有极深的抱怨，迫切需要让情况变好一点。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。...在这里，我以我本人的开发喜好为例，讲解一下使用 React 作为前端界面框架、Ant-Design 作为 UI 库、Electron 作为 Native 支持的项目搭建。...是现在最好的 JavaScript IDE，当然如果你一定要使用命令行来创建我也没意见，只是 WebStorm 可以方便你之后的开发。...如果看到这样的页面，上面有一个 Antd 样式的按钮： 页面效果 那么恭喜你，至少你到这一步之前的都成功了，如果没有成功，仔细回看步骤，看是否有做错的地方。...electron运行构建出来的Web项目 yarn estart 即可看见效果，像这样： Electron 应用运行效果 像平时写 Web 项目一样写原生 UI 吧，Enjoy!
在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...1.参照其他样式组件 像 styled-components 和 emotion 库允许您使用 标记模板文字 从样式中创建 React 组件： import styled from 'styled-components...，作为另一个例子，你也可以使用 react-with-styles，它有实现 Aphrodite 或 JSS 接口，这样在定义样式时就可以访问主题信息了。...但是，如果您真的想在所有样式中使用 JavaScript，那么有些库实际上允许您通过 helper 组件或扩展/插件来定义全局样式。...结论 CSS-in-JS 是一种使用 JavaScript为应用程序设置样式的技术，你可以使用实现它的库来做有趣的事情。 在这篇文章中，我向你展示了5件你可能不知道可以使用这些库来做的事情。
前言 今天我们来看看2019年的一些伟大的JavaScript动画库。在2002年左右，我们使用Flash来制作网络动画。...使用JavaScript的动画是一项非常艰巨的工作，它需要深层次的知识和技能。但是，我们有一些很棒的JavaScript动画库，可以让开发过程更轻松。您可以在网络上找到很多JavaScript动画库。...资源地址 Rekapi Rekapi是JavaScript的关键帧动画库。 ? 资源地址 Granim.js 使用这个小的JavaScript库创建流体和交互式渐变动画。 ?...资源地址 Particles.js 用于创建粒子的轻量级JavaScript库。 ? 资源地址 AOS AOS（动画在滚动）比JavaScript更依赖于CSS。 ?...资源地址 Ant Motion Ant Motion是Ant Design的一个运动设计规范，它还提供了一个完整的解决方案，为您的React应用程序提供了许多现成的动画。 ?
在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...1.参照其他样式组件 像 styled-components 和 emotion 库允许您使用 标记模板文字 从样式中创建 React 组件： import styled from 'styled-components...，作为另一个例子，你也可以使用 react-with-styles，它有实现 Aphrodite 或 JSS 接口，这样在定义样式时就可以访问主题信息了。...但是，如果您真的想在所有样式中使用 JavaScript，那么有些库实际上允许您通过 helper 组件或扩展/插件来定义全局样式。...结论 CSS-in-JS 是一种使用 JavaScript为应用程序设置样式的技术，您可以使用实现它的库来做有趣的事情。 在这篇文章中，我向您展示了5件您可能不知道可以使用这些库来做的事情。
最近，我对对比框架和普通的 JavaScript 产生了浓厚的兴趣。这始于我在一些自由职业项目中使用 React 时遇到的一些挫折，以及我最近作为规范编辑，对 Web 标准有了更多的认识。...在本系列文章的第一部分中，我将深入探讨一些跨框架的共性技术特性，并介绍几种不同的框架是怎样实现这些特性的。我还要看一下使用这些框架的成本。 框 架 我选取四种架构进行研究。...在 React 中，列表处理看起来像这样： contacts.map((contact, index) => {contact.name} ) React...html`${contact.name}` 组件模型 有一件事超出了本文的范围，那就是不同框架中的组件模型，以及如何使用自定义 HTML 元素来处理它。...我同意，但是可能像 Svelte 和 SolidJS 这样的“构建”以及像 Lit 这样的自定义客户端模板引擎都只是单纯的开销吗？ 调试 在构建和转译过程中，需要付出的成本也是不同的。
为简单起见，我将坚持使用更吸引人的单词同构 Isomorphic，也是为了避免卷入技术领域如此普遍的术语大战中。...由于这个原因，像Underscore.js，lodash，Request和SuperAgent这样的库非常受欢迎。...可选项：React.js、Lazo.js 和 Rendr所以你想在你的 Web 开发中处理同构吗？...虽然有各种各样的库和框架允许开发人员在JavaScript中使用同构，但一些最受欢迎的选择是React.js，Lazo.js和Rendr。以下是对这些库的快速比较。...这意味着它可以与大多数其他库前端库（如 Backbone.js）一起使用。React.js 通常与 JSX 语言一起使用，JSX 语言是 JavaScript 和 XML/HTML 的混合体。
这样，它就不会意外泄露到其他 React 组件的样式中。你的应用的某些部分仍然可以共享样式，但其他部分不必访问它。...所有的方案在大型 React 应用中都适用。最后一点提示：如果你想在 React 中有条件地应用一个 className，可以使用像 clsx 这样的工具。...通常开发者会选择 React Transition Group，这样他们就可以使用 React组件来执行动画了，React 的其他知名动画库有： Framer Motion (最推荐)：https://...像 ESLint 这样的 linter 会在你的 React 项目中强制执行特定的代码风格。例如，你可以在 ESLint 中要求遵循一个流行的风格指南(如 Airbnb 风格指南)。...我个人没用过它，因为 JavaScript 本身就可以用于管理不可变的数据结构，但是如果有人专门问到 JS 的不可变性，有人会推荐它。
前言 JavaScript中的语句和表达式有什么不同之处？ 对于这个问题，我似乎知道答案，但当我尝试向别人解释时，我却语塞了。对于这个问题我有一种感觉，但无法清晰的表达出来。...你不得不记住的那些JSX规则，以及总是忘记遵守的那些规则，大部分都是 「语句/表达式」 双重性的结果。 在这篇文章中，我将分享我对这两者区别的一些感悟，以及我们如何在日常工作中使用这些信息。...React中的实践 如果你曾使用过React，你可能知道大括号{和}允许我们在JSX中嵌入一些JavaScript，就像这样： function CountdownClock({ secondsRemaining...如果我们想在JSX中嵌入if/else逻辑，我们需要使用一个三元操作符表达式： function CountdownClock({ secondsRemaining }) { return (...我们还需要了解JSX是如何编译成JavaScript的，以及React的调度与渲染周期是如何工作的......但是，这些话题已经超出了本篇文章的范围。
Angular 2 在运行时静默失败（如果使用 Angular 中的预编译，这个参数可能是无效的）。 JSX 意味着 React 中的所有内容都是 Javascript -- 用于JSX模板和逻辑。...旁注：如果你喜欢 JSX 的思路，并想在 Vue 中使用它，可以使用 babel-plugin-transform-vue-jsx。...对于复杂度不大的应用程序，就不必定义的状态流了，像原生 JS 就足够了。 它是如何工作的？组件在任何时间点描述 UI。当数据改变时，框架重新渲染整个 UI 组件 - 显示的数据始终是最新的。...灵活性与精简到微服务 你可以通过仅仅添加 React 或 Vue 的 JavaScript 库到你的源码中的方式去使用它们。...如果你是一个没有经验的 Javascript 开发人员 - 或者如果你在过去十年中主要使用 jQuery，那么你应该考虑使用 Vue。转向 React 时，思维方式的转换更为明显。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
