React 静态站点生成器： Gatsby

React 静态站点生成器： Gatsby

文章出处： 拉 勾 大前端 高薪训练营

练习代码地址

Gatsby 是一个静态站点生成器,官 地址是：https://www.gatsbyjs.cn/

一、静态应用的优势

1. 访问速度快
2. 更利于 SEO 搜索引擎的内容抓取
3. 部署简单

二、Gatsby 总览

1. 基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具，开发人员开发体验好；
2. 采用数据层和UI层分离而不失 SEO 的现代前端开发模式.对SEO非常友好；
3. 数据预读取，在浏览器空闲的时候预先读取链接对应的页面内容.使静态页面拥有 SPA 应用的用户体验，用户体验好；
4. 功能插件化， Gatsby 中提供了丰富且功能强大的各种类型的插件，用什么装什么。

三、创建 Gatsby 项目

1. 全局安装脚手架工具

2. 创建项目

创建:
启动: 或
访问: localhost:8000

四、基于文件的路由系统

Gatsby 框架内置基于文件的路由系统，页面组件被放置在 src/pages/ 文件夹中

src/pages/list.js

访问地址: http://localhost:8000/list

五、以编程的方式创建页面

基于同一个模板创建多个 HTML 页面，有多少数据就创建多少页面。比如商品详情页面，有多少商品就生成多少商品详情展示页面

gatsby-node.js

src/templates/person.js

六、 Link 组件

在 Gatsby 框架中页面跳转通过 Link 组件实现

七、 GraphQL 数据层

在 Gatsby 框架中提供了一个统的存储数据的地方，叫做数据层。
在应用构建时，Gatsby 会从外部获取数据并将数据放入数据层，组件可以直接从数据层查询数据。
数据层使用GraphQL构建。
调试工具: http://localhost:8000/___graphql

八、 GraphQL 数据查询

1. 页面组件

在组件文件中导出查询命令，框架执行查询并将结果传递给组件的 prop 对象.存储在 props 对象的 data 属性中。

2. 非页面组件

通过钩子函数 useStaticQuery 进行手动查询

九、 Gatsby 插件

Gatsby 框架内置插件系统，插件是为应用添加功能的最好的方式.
在 Gatsby 中有三种类型的插件:分别为数据源插件(source),数据转换插件(transformer),功能插件(plugin)
数据源插件: 负责从应用外部获取数据，将数据统一放在 Gatsby 的数据层中
数据转换插件: 负责转换特定类型的数据的格式，比如将 markdown 文件中的内容转换为对象形式
功能插件: 为应用提供功能，比如通过插件让应用支持 Less 或者 TypeScript.

https://www.gatsbyjs.org/plugins/

十、将 JSON 数据放入数据层

要将本地JSON文件中的数据放入数据层需要用到两个插件.
: 用于将本地文件中的数据添加至数据层.
: 将原始 JSON 字符串转换为 JavaScript 对象.

创建数据：
json/products.json

存放图片的 images 文件夹在 static 目录下。

安装插件：

配置插件：
gatsby-config.js