文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

JavaScript 前端头条二月周刊 （第1周）

MACARTHUR 2、第 94 届 TC39 会议的更新 负责制定ECMAScript标准的TC39委员会上周召开了会议，并在一些语言提案上取得了进展，其中Change Array by Copy、...-48mb 3、Netlify 收购 Gatsby 基于 Gatsby React 的框架背后的公司正在加入 Netlify，许多 Gatsby Cloud 功能有望集成到 Netlify 自己的平台中...www.gatsbyjs.com/blog/gatsby-is-joining-netlify/ 4、你可能不需要 Lodash 或 Underscore 受流行的 《You Might Not Need...Abramov 写了一篇关于 Create React App 状态的广泛文章，一条向前推进的路线，以及他如何看待 React 作为一个库在框架生态系统中的工作。...（github.com/facebook/docusaurus） Jotai 2.0：Jotai 从简单的 useState 替代品扩展到企业 TypeScript 应用程序。

3.2K10

你的博客用不着什么JavaScript框架

最后还有成本优势：LAMP stack 服务器得按月付费；Netlify 的免费套餐（每月构建 300 分钟）应该可以轻松覆盖零成本个人博客的需求。...这里就有些不对劲——Gatsby 需要你以 React 组件的形式再加载一次页面；在完成多出来的这一步之前，所有需要 JavaScript 的元素（例如按钮、菜单、自定义输入）实际上都不能交互。...华丽的 Gatsby 网站在 2,000 美元的 MacBook 上可能很快，但对于使用 3G 连接和廉价智能手机的用户来说，它显示是能显示出来，但是没有响应；用户等待加载 JavaScript 的过程要持续...它甚至预配置了 Netlify CMS，因此你无需编写任何代码即可编辑网站内容。 我学到了什么呢？...我使用了 loading="lazy"属性来延迟加载图片，但它的浏览器支持不够完整，并且在原生浏览器实现改进之前，它无法在加载图片时淡入淡出。

5.5K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一杯茶的时间，上手 Gatsby 搭建个人博客

    这时 @unicar[8] 正好推荐了基于 React 的 Gatsby[9]。发现其生态很强大，再搭配 React 庞大的生态，确实非常吸引人。...Debug GraphQL Gatsby 魔法带来的另外一个坑是 GraphQL 报错信息不全，可能会默默被吞掉，也可能无法定位到最终文件。...Netlify CMS 借助 Oauth 把写好的 Markdown 文件推送到项目源码的仓库上，再配合 Netlify 检测仓库变动自动构建发布。当然后者也不是必须的，可以换其它方式自动构建。...Netlify CMS 的优点是开源免费，文章跟项目源码在一起，界面可以高度自定义，甚至可以自行扩充 React 组件，基本满足简单的博客编写需求。...迁移博客需要考虑的一个重要问题便是路径兼容。我们当然不希望迁移后原有的链接无法访问，这不仅影响到 SEO ，更带来了不好的用户访问体验。本文将聊聊怎么让 Gatsby 兼容 Jekyll 式路径。

    4.3K20

    塔荐 | 2018 年最值得关注的 JavaScript 趋势

    Facebook会做它最擅长的东西：抄袭创新者然后世界继续使用React。...尽管Facebook从未在这场游戏中领先过，并且在创新的势头上无法与Vue匹敌，但在工具使用、代码切割、路由以及状态管理方面， React加上Next.js能让你在体验上跟Vue接近许多 ，此外还能让你获得大规模的...Gatsby Gatsby 是Kyle Mathews开发的用于React的静态网站生成器。 自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。...React网站本身就是用Gatsby开发的，再也有没有比这更有力的证明了。 Gatsby的全部关切都在于性能和给React提供尽可能快的web体验。...要想更多了解Gatsby，可参考这篇文章：https://www.gatsbyjs.org/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/ Babel

    2K80

    2023 年，这 9 个项目助你成为前端高手

    以 React 为例，它由 Facebook 在四年前开源，现在已经成为全球 JavaScript 开发者的首选。 当然，Vue 和 Angular 也有它们自己的追随者。...你应该尝试一下它，因为它也将帮助你成为更好的 Vue 开发者。 7 用 Gatsby 构建一个博客 Gatsby 是一个很好的静态站点生成器，它在底层使用了 React 和 GraphQL。...这个项目看起来是这样的。 你将学到什么 在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...我并不是说 WordPress 是一个糟糕的选择，但有了 Gatsby，你可以使用 React 构建一个高性能的网站——这是一个很棒的组合。...今日好文推荐 每个月在云上“狂烧”180万，Ruby On Rails 之父：我们要直接买硬件！ 从大前端“穿越”到终端，开发者应该必备什么技能？

    4.4K20

    深入探讨 Web 开发中的预渲染和 Hydration

    我们可以选择使用服务器或 Serverless 功能 SPA 可以托管在静态 CDN 上，如Netlify。...在服务器上渲染 React 组件，然后将生成的 HTML 发送到浏览器。这可以提高 SEO 和初始加载时间。渲染过程在每个页面请求时发生。 什么是静态站点生成（SSG）？...在 React 中，“Hydration”是 React 如何“附着”到已经在服务器环境中由 React 渲染的现有 HTML 上。...然后，在 React 应用程序在用户设备上挂载后，第二次渲染会填入所有依赖于客户端状态的动态部分 总结： 预渲染和 Hydration 框架工作时的潜在错误及解决方法 第一次传递：我们看到预渲染的...这就是会遇到的错误： 通过 DevTool 我们可以看到服务器的响应。它是一个空的标签。 服务器的响应如下： 但客户端加载的 HTML 中写着“这个 p 标签将会显示”。

    2.1K10

    用 Gatsby 创建一个博客

    功能插件 功能插件用来实现某些功能（离线支持，生成一个站点地图等等）或者他们扩展了 Gatsby 的 webpack 配置，增加了对 Typescript、Sass 等的支持。...react-helmet 是一种允许修改 head标签的工具 Gatsby 静态地呈现这些头部标签的变化 使用下面的命令： `yarn add gatsby-plugin-catch-links gatsby-plugin-react-helmet...这个 React 组件将被呈现为静态 HTML 字符串，这将成为我们博客导航的基础。 在这一点上，有一种合理的混乱和魔法会发生，特别是在 props 属性注入的时候。...在这一点上，我们使用 React 组件和几个 GraphQL 查询创建了一个单页静态博客。然而，这不是一个博客！...实际的 React 组件是相当琐碎的，需要注意一点，当链接到内部内容时，你应该经常使用 gatsby-link。 如果页面没有通过这个实用工具进行路由，Gatsby 就无法工作。

    3.5K30

    大势 | 2018最值得关注的JavaScript趋势

    尽管Facebook从未在这场游戏中领先过，并且在创新的势头上无法与Vue匹敌，但在工具使用、代码切割、路由以及状态管理方面，React加上Next.js能让你在体验上跟Vue接近许多，此外还能让你获得大规模的...它还被用到了许多其他你热爱的项目上，比如Webpack、React、Next.js、Babel等。...Gatsby Gatsby是Kyle Mathews开发的用于React的静态网站生成器。 自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。...React网站本身就是用Gatsby开发的，再也有没有比这更有力的证明了。 Gatsby的全部关切都在于性能和给React提供尽可能快的web体验。...尽管Gatsby无论如何也不会统治这个行业，但却是开发快速静态网站非常出色的解决方案，会不断流行下去。 Babel 到现在Babel已经没有介绍的必要了，大体上它仍将成为趋势延续下去。

    1.2K20

    2020 年你应该知道的 React 库

    React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序。...例如，gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制，但是其他所有内容都被省略了。...尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中，CSS Modules 通常将 CSS 文件与 React 组件文件共存。 import styles from '....如果你希望有人来处理所有的事情，如果你已经在使用第三方的身份验证/数据库，Netlify 是一个很受欢迎的解决方案，比如 Firebase，你可以检查他们是否也提供主机服务(比如 Firebase Hosting...这两个库使得在 HTML 元素上呈现组件和模拟事件成为可能。然后，Jest 用于 DOM 节点上的断言。

    18.7K40

    写在 2021: 值得关注学习的前端框架和工具库

    Ionic[20]，出现比较早的一个跨端方案，最开始只支持Angular，现在还支持了React和Vue，暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题（所以Angular YES）。...这个方法，可以把整个GraphQL Server以中间件的形式挂载到一个Node应用上（我就是使用这种方式来同时提供REST和GraphQL两套API的，但需要注意某些中间件的配置需要ignore掉挂载的路径...还支持React、Gatsby、NextJS、普通Web应用等，甚至集成好了Jest、Cypress、StoryBook等。 Lerna[78]，我用这个作为工程项目的Monorepo管理。...PNPM[80]，实际上是包管理工具，但内置了Monorepo支持，我也在用这个（强烈安利），想要了解可以看看三元的这篇文章：为什么现在我更推荐pnpm而不是 npm/yarn ？...: https://github.com/gatsbyjs/gatsby [10] React-Testing-Library: https://github.com/testing-library/react-testing-library

    5.7K10

    从VR到元宇宙：回顾30年，改变虚拟现实的18件大事

    全球最大的社交媒体公司Facebook改名叫Meta以后，该公司的战略重心转移到虚拟现实和增强现实上面，并搭建了元宇宙平台。...事实上，从某些角度来看也确实如此。2000年是这款游戏的鼎盛时期。自那之后，Second Life受到的关注就越来越少了。但如今，Meta和其它科技公司正狂热地追逐元宇宙的浪潮。...该VR系统还依赖于索尼的Playstation Move外围设备的接合，无法像Vive或Oculus Rift那样拥有高质量的控制方式。...将头盔用于Facebook想象中的所有应用显得有点野心，但Quest 2的诞生，可能让普通人体验VR是更接近真正的「爽快感」。...我们有很多理由对Facebook的决定及其公司的总体情况持怀疑态度，但通过对「元宇宙」的三番五次的宣传，它的确掀起了一波VR热潮。

    75020

    JavaScript 框架太多了？相反，是太少了

    Next.js 和 Gatsby 使用的是默认为 SPA 的 React，所以并不完全适合我的用例。当然，我们可以想办法用 Next.js 或 Gatsby 生成静态站点，再将站点转换成多页应用程序。...但这些都属于变通手段，而且这些框架的静态构建其实无法使用服务器端渲染功能（至少截至撰稿时还不行），所以并不符合我的要求。...总之，肯定有某些现实问题还缺少理想的现成框架；我们身为开发人员，怎么能对有益的新方案说不呢？...这是个有趣的 React 替代方案，不仅不再强制要求使用模板语言，而且允许在客户端和服务器上渲染 HTML。请注意，那可是 2013 年，也就是十年之前。...这也反过来给了我们信心：如果我们正在构建某些产品，并发现其中的问题无法通过现有技术直接解决，那就果断构建出新的 JavaScript 框架。当下不存在完美的解决方案，往往意味着永远都不会存在。

    3.2K30

    React 入门手册

    2013 年，Facebook 首次向全世界发布了 React。此后，人们用它开发了一些应用最广泛的 APP，并且它也使 Facebook 和 Instagram 在无数应用中占得领先地位。...现在很多工具都是基于 React 开发的，比如 Next.js，Gatsby 等流行框架与工具，它们在后台都使用了 React。 作为一名前端工程师，你很可能会在面试时遇到关于 React 的问题。...我们不能直接修改 state，只能通过调用修改函数来修改它，否则，React 组件无法及时将数据的变化反映在 UI 中。 调用修改函数是一种将组件 state 的变化告知 React 的方法。.../ 更新时，传递给 useEffect() 的函数都会被执行，所以出于性能上的考虑，我们可以告诉 React 在某些时候不要执行这个函数。...学习如何使用 React 路由。 学习如何测试 React 应用。 了解基于 React 构建的应用程序框架，如 Gatsby 或者 Next.js。

    7.9K10

    前端之变（三）：变革与突破

    ，无法突破 无论是HTML，CSS或是JS，它们的能力永远限制在浏览器这个容器内，当然前些年流行的JQuery，Boostarp这一类的技术框架也是这样，如果认真分析，会发现它们的能力始终在浏览器之内。...比如less 其实less总体上与css基本一致，它也并未提供任何新的css样式，它的区别只是在单纯的静态CSS样式基础上，添加了一些动态能力，比如变量，函数等 @width: 10px; @height...，在编码阶段，前端出现了更多的突破性的技术，最典型的代表就是：npm依赖管理 其实，区分你是在『前』前端阶段，还是在『后』前端阶段的一个最简单的识别手段就是： 你是否使用了npm依赖管理 因为： 在『前...": "^1.6.22", "@types/react-helmet": "^6.1.0", "gatsby": "^2.26.1", "gatsby-image": "^2.8.0...": "^2.1.10", "gatsby-plugin-mdx": "^1.7.1", "gatsby-plugin-react-helmet": "^3.7.0", "gatsby-plugin-sharp

    2.5K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券