安装 Node.js; 安装 Git; Gatsby 开发环境 Gatsby 的 CLI 工具非常方便,在终端全局安装 gatsby-cli
北京时间 9 月 23 日凌晨,React 团队发布了关于全新 JSX 转换的博客,同时发布了 React 17.0.0-rc.2 版本,新的 JSX 转换不再依赖 React 环境,在转换时会自动引入新的 runtime。
最近在做一些SAAS产品,Landing page——落地页对于SAAS类产品的重要性不言而喻。之前有想过用wordpress找一些比较漂亮的模板,但想想觉得这个方案对于初期的产品来说还是有点重了。用Vue的话,找了一圈没有发现合适的模板。React体系内,我发现Ant Design生态里有一款Ant Design Landing 框架,简洁明了,又不失美观,比较符合我的需求。
用 JavaScript 语法来写 css,主要用于两个框架:agnostic 和 React。下面是用于 React 框架的简单示例:
参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
gatsby-config.js 位于项目根目录,用于配置项目信息,如果没有就新建一个。
PAI 购买页:https://cloud.tencent.com/solution/pai
将应用中的静态资源缓存是目前最主流的性能优化方法,甚至能让应用秒开!目前常见的缓存方式有http缓存、memory cache、disk cahce、localstorage、Service worker缓存等方式,本文介绍的Workbox就是实现Service worker离线缓存的一个工具。
Gatsby 使用一个 Starter1 进行 npm install 的时候出现问题:
我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。
说起前端框架,我的第一反应就是Angular,Vue和React了,在实习的时候Vue和Angular都使用过,也写过相关的博客,包括自己毕业设计就是Angular来做的,但是毕业之后,在现在家公司就没有机会去使用这些框架(实际上我对于Java更加感兴趣),所以现在对于前端框架的了解可能只是知道一些名词了。这次由于公司产品新的版本用的是React框架,所以有了学React的想法(当然只是想简单的学一些,够用就行了)
可以给每个方法加上.bind(this)来解决 this 指向的问题,因为大多数教程都告诉你这样做。如果你有几个受控组件,那么constructor(){}中就会有一大堆代码。
最近学习了一小段时间的React,对一些React开发组件的基础有了一点认识,跟着教学视频,自己实现了一个ToDoList组件的功能,今天把做这个组件的过程记录一下,加深学习印象,给同样的前端入门者做一个参考。
MDX 是一种文档格式,可以在 Markdown 文档中无缝地插入 JSX 代码。
渐进式 Web 应用首先是一种应用,它根据设备的支持情况来提供更多功能,提供离线能力,推送通知,甚至原生应用的外观和速度,以及对资源进行本地缓存。
gatsby 为自动修改样式组件中的className,使其具有唯一性,避免与其他名称冲突而失效。
自2013年5月29日首次发布以来,React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。
相信很多人都想要搭建一个自己的博客或是给项目做文档网站。本文将要推荐的静态网站生成器(Static Site Generator, SSG),它做的事情就是把你的文档、内容(通常为 Markdown 文件)生成可发布成网站(html)的工具,这样你就可以专心创作,同时也有了一块自己发表自己想法的网站。然后 GitHub、Gitee 等均支持免费 Page 服务,通过简单的配置 SSG 就可以实现一条命令发布,有一个自己小窝就是这么简单和方便~
ServiceWorker作为前端革命领袖,毫不夸张地被誉为前端黑科技,此文将阐述如何巧妙的使用它来实现一些看起来匪夷所思的事情。
开始使用React的最佳方式是投入其中。在这篇文章中,我将带您经历一个简单的开发过程,创建一个用于跟踪待办事项的应用程序。
今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:
Node.js 就是一个封装了 操作系统API 的可执行程序,同时也对外提供了自己的API,并采用了 JavaScript 作为其API 的标准。换言之,应用软件可以用 JavaScript 直接与操作系统进行交互通讯。
本博客系统使用GatsbyJS构建,源码来自UnrealCPP,这里修改了部分功能。
你的网页性能优化的再好,如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术,让资源在第一次被加载后缓存在本地,下次访问它时就直接返回本地的文件,就算没有网络连接。
StaticImage 是 gatsby-plugin-image 提供的组件,类似html 中的 img 标签,可以在页面中直接使用。
使用cache Api,预先缓存offline.html和offline.svg。当网络不通时,html请求走到cache方法里面去,然后响应的是缓存好的offline.html。offline.html又请求已经缓存好的offline.svg。所以正常显示。
Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处,比如不使用JavaScript、搜索引擎友好性、非常快的加载速度等等,也并没有失去现代web所期望的活力和交互性。一旦呈现为静态 HTML,客户端站点的React和JavaScript会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0,推出了很多新特性。包括(但不限于)使用GraphQL创建内容查询的能力,与各种cms集成——包括WordPress、Contentful、Drupal等等。还有基于路由的代码分布使得用户体验更佳。在这篇文章中,我们将深入探讨 Gatsby 和一些新特性,并创建一个静态博客。让我们开始吧!
学习视频地址 https://www.imooc.com/learn/1045 1 使用create-react-app 快速构建React开发环境 $ cnpm install -g creat
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。
首先,我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)
生产环境中,不需要打印日志。通过对webpack进行配置,打包时自动去掉console.log
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nhnent/tui.editor Star 5033 tui.editor(TOAST UI Editor)是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大,你可以编辑表格,UML图和图表等。 TOAST UI Editor的Markdown模式的特点有: ● 所见即
回到上一篇我讲的不变前端中,我在文章中明显的指出了,前端的变化会有一个分界线,在这个分界线之前,前端有一个最大的困境,就是:
特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出,“人类将被动等待高估了 36%”(https://mazey.cn/t/em)。这意味着用户感觉到的等待时间比开发工具记录的长得多。
1. 拦截图片加载失败 返回默认图片 案例 https://bitsofco.de/handling-broken-images-with-service-worker/ 2. 蓝湖 https://lanhuapp.com/
下面这些文件忘记出处是哪,Github也能搜到一些,之前写的 PWA 的 Demo 里面拿过来的~
PWA(Progressive Web App - 渐进式网页应用)是一种理念,由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验的 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA 的核心。
我们在编写项目的时候,都会引入很多很好用的工具包,例如VueX、axios、Router、Element UId等。这些包很好用,安装引入也很方便。那如果我们也想发布一个我们自己的工具包,在以后编写项目时,直接引入我们自己的工具包要怎么发布呢?
大家好,我是 ssh,前几天在推上冲浪的时候,看到 Francois Valdy 宣布他制作了 browser-vite,成功把 Vite 成功在浏览器中运行起来了。这引起了我的兴趣,如何把重度依赖 node 的一个 Vite 跑在浏览器上?接下来,就和我一起探索揭秘吧。
•微信公众号 《JavaScript全栈》•掘金 《合一大师》•Bilibili 《合一大师
Gatsby CLI 用于 Gatsby 项目的创建、启动、编译等。它是发布于 npm 的包,可以用npm进行安装管理 npm install -g gatsby-cli。
事件钩子会有不同的类型 SyncBailHook,AsyncSeriesHook,SyncHook等
根据 前端框架调查 ,Reactjs 是开发者社区中最受欢迎和喜爱的框架。此外,根据 2020 年堆栈溢出调查 ,React 是开发人员之间使用最多的前端开发框架。只有 jQuery 库领先于 Reactjs。
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed to sw-precache. service_worker: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2} -
上周我写了一篇关于我对 Next.js 的失望的文章。不过我接下来希望写点正能量的内容,那必须是我最喜欢的 Astro 了。
网站的性能一直是前端工程师努力的方向之一,更加流畅的体验,更加快速的页面呈现,都是好的web网站的指标之一。
GitHub 上面的顶级项目都是做什么的? 下面是第二周的学习记录: 起因: 前一阵看到同事在用一个名叫 AirFlow 的工具,而我竟然素未耳闻,一番搜索之后发现这个工具 是 Apache 的顶级项
已经实现好的模块功能 , 完全可以复用 , 避免重复造轮子 , 这些功能可以封装在 Flutter 包中 ;
配置文档:https://cn.vitejs.dev/config/,基于ESM;
领取专属 10元无门槛券
手把手带您无忧上云