我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。
Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处,比如不使用JavaScript、搜索引擎友好性、非常快的加载速度等等,也并没有失去现代web所期望的活力和交互性。一旦呈现为静态 HTML,客户端站点的React和JavaScript会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0,推出了很多新特性。包括(但不限于)使用GraphQL创建内容查询的能力,与各种cms集成——包括WordPress、Contentful、Drupal等等。还有基于路由的代码分布使得用户体验更佳。在这篇文章中,我们将深入探讨 Gatsby 和一些新特性,并创建一个静态博客。让我们开始吧!
代表了一种开发功能强大的 react.js 组件的全新方式,这些组件在完全可定制的同时开箱即用。
前言 JavaScript 渗透的范围越来越广,它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript 现状报告 ,现在Ryan Chartrand非常应景地推出了 2018年的JavaScript发展趋势 ,把这两份文章一起结合来看,相信作为JS开发者的你一定不再迷茫。 去年,有50000人对JavaScript的上升趋势感到好奇。那么好吧,我的开发者同胞们,现在我们再来看看2018年怎样。 如果你2017年一整年都与世隔绝或者忙于项目而自顾不暇的话
Paul Scanlon 使用 Waku 展示了 RSC 如何让 React 开发人员在组件级别访问异步服务器端请求和数据。
今天我们来聊 React,React 已经风靡前端届很长一段时间了,在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React,它的生态功不可没。
StaticImage 是 gatsby-plugin-image 提供的组件,类似html 中的 img 标签,可以在页面中直接使用。
作为开发者,经常需要面对影响整个应用架构的决策。而Web开发者的核心决策之一,就是应用逻辑与渲染工作的实现,应处于架构中的什么位置(译注:客户端 or 服务器?)。现在有很多不同构建网站的方法,因此这些决策变得愈加困难。
React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者,你可能已经习惯了框架包含了所需要的所有功能,
无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。
作者 | Kurt Bittner 、Pierre Pureur 译者 | 平川 策划 | 丁晓昀 无论你是编程新手还是资深开发人员,学习新的概念和语言(或框架)都是跟上快速的技术发展节奏的必要条件。 以 React 为例,它由 Facebook 在四年前开源,现在已经成为全球 JavaScript 开发者的首选。 当然,Vue 和 Angular 也有它们自己的追随者。还有 Svelte 以及像 Next.js 或 Nuxt.js 这样的通用框架,还有 Gatsby、Gridsome,等等。 如
像其他所有人一样, 我最近碰巧也读了 Jose Aguinaga 的文章 “How it feels to learn JavaScript in 2016”.
回到上一篇我讲的不变前端中,我在文章中明显的指出了,前端的变化会有一个分界线,在这个分界线之前,前端有一个最大的困境,就是:
对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年JavaScript的五种主要发展趋势。
而本渣最近维护的项目恰巧在这个方向下了很大功夫,一些经验之谈奉上,希望对大家有些许帮助!
前端爱好者的知识盛宴 JavaScript渗透的范围越来越广,它能做的事情已经远不止前端开发而已。 掌握2018最新JS趋势,很有必要! 不久前stateofjs.com刚刚发布了一份2017 JavaScript现状报告,现在Ryan Chartrand非常应景地推出了2018年的JavaScript发展趋势,下面把这两份文章一起结合来看,让作为JS开发者的你少走弯路。 首先看看火爆2017的vue。 React vs. Vue.js 我们开门见山,直接上好东西吧:认为Vue可能会成为React的一大
我们生活在一个真理不再是非黑即白的世界。在我们生活的世界里,媒体明白,影响人们的最佳方式不是通过逻辑,而是通过情感。他们明白我们人类不是通过有意识的思考和逻辑处理来做决定,而是通过隐藏在我们心灵中的无意识倾向来做决定。对通过媒体赚钱的人来说是好事,对像我们这样消费媒体的人来说是坏事。
这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递,我这么就为了看着舒服一点。
今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:
React、Vue 等现代化前端框架的大旗之下,CSR(Client-Side Rendering)模式深入人心:
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
gatsby 为自动修改样式组件中的className,使其具有唯一性,避免与其他名称冲突而失效。
首先,我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)
构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样式。
官方文档:https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
web性能是一头狡猾的野兽让人难以琢磨和处理,不是吗? 我们如何才能知道我们在性能方面所处的真正水平,以及我们的性能瓶颈到底是什么呢? 它是巨大的JavaScript文件、缓慢的Web字体传输、繁重的图像、还是缓慢的渲染? 是否值得去研究 Tree-Shaking、作用域提升、代码拆分,以及所有奇特的加载模式,包括交叉点观察器做懒加载、服务器推送、客户端提示、HTTP/2、service workers 或者说 edge workers? 而且,最重要的是,我们该从哪里开始做性能优化,以及我们应该如何建立长期的关注性能的团队文化?
Gatsby 在 gatsby-browser.js 文件中提供了一些API,可供开发者 监控浏览器的特定事件 和 写一些全局组件。
Gatsby 是在 Node.js 的基础上建立,使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。使用 Gatsby CLI 工具,三句命令就可以新建一个静态网站。详情步骤,看这里!
静态站点构建是现代Web开发的热门趋势之一。它可以提供快速加载、安全可靠、易于扩展的网站,而不需要服务器端代码。本文将深入探讨静态站点构建的关键概念,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以帮助您创建卓越的静态网站。
最受欢迎项目 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40,000 的 star。 相较于 2016
在这里,我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点,反思一下作为一个开发者所需要的技术水平,反思一下作为一个React开发者,每个启动项目都能为你提供哪些功能。最后,你将了解到针对不同需求的3种解决方案。
JavaScript 框架是预先编写的 JavaScript 代码集合,为开发 Web 应用程序提供结构化且可重用的基础。这些框架都有自己独特的功能、方法和生态系统。
为了在技术驱动的环境中保持相关性,使信息可以即时获得,并且可以跨越所有可能的渠道,B2C和B2B组织必须仔细检查其内容创建和交付基础设施。Web CMS没有提供数字团队需要的能力来赢得客户,扩展到新的渠道和快速发布数字产品。商业领袖和数字团队正在寻找传统CMS的替代品,包括无头内容管理系统和作为服务的CMS。
编者按:本文作者Berwin,W3C性能工作组成员,360导航资深前端工程师。《深入浅出Vue.js》作者。
注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。
导语 | 面试的时候问页面性能有哪些指标,却经常得到合并文件、压缩资源等优化手段的答案,是时候整体盘一下“性能指标”了。 1. 基本指标介绍 首先前端性能指标一般分为以下几种: 首屏绘制(First Paint,FP) 首屏内容绘制(First Contentful Paint,FCP) 可交互时间(Time to Interactive,TTI) 最大内容绘制(Largest Contentful Paint,LCP) 首次有效绘制(First Meaning Paint, FMP) FP 是时间线上的第
最近在研究JAMStack的一些相关内容,发现这的确是个好东西,所以想写一篇文章把这个概念分享给还不了解JAMStack的同学。本篇文章主要包含以下的内容:
在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。
微言码道的官网是我在2021年元旦三天假期的时候做的一个网站,自那以后,因为业余时间有限,除了网站内容上有所变更以外,网站本身没有任何更新。
在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。
当我们尝试从函数组件中返回元素组成的数组时,会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误。为了解决该错误,可以将元素数组包裹在React片段中。
传统的性能指标如 load time[1] 或 DOMContentLoaded[2] 专注于容易衡量的技术细节,但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快,你很快就会发现网站的用户体验依然很差。一个站点的总加载时间可以很快,但如果它直到所有内容都准备好了才渲染的话,用户只能盯着空白的屏幕一段时间。如果点击了按钮但没有反应,是因为主线程被 JavaScript 任务占满而阻塞了,此时虽然页面已经“加载”,但用户依然会感到沮丧。
MDX 是一种文档格式,可以在 Markdown 文档中无缝地插入 JSX 代码。
你是怎么做性能优化的?关于这一个问题,也是我们前端开发程序员经常会讨论到的问题,接下来这篇文章将总结一下前端方面的性能优化及方式。
上周我写了一篇关于我对 Next.js 的失望的文章。不过我接下来希望写点正能量的内容,那必须是我最喜欢的 Astro 了。
React 发布已经十年了,笔者接触前端差不多也有十年时间了。说实话,如果没有 Head First 系列图书,我可能都没有走上编程这条道路。
根据 前端框架调查 ,Reactjs 是开发者社区中最受欢迎和喜爱的框架。此外,根据 2020 年堆栈溢出调查 ,React 是开发人员之间使用最多的前端开发框架。只有 jQuery 库领先于 Reactjs。
领取专属 10元无门槛券
手把手带您无忧上云