更现代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基础概念

Gatsby工程目录

创建gatsby工程后(如果不会创建，可参见上节)，用VSCode打开，目录如图所示：

标准的Node工程目录结构，根目录包含一个package.json。

• src 源码目录
• public 构建后生成到此目录

熟悉一下Gatsby界面

如上节所讲，进入工程根目录，运行$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以看到界面。

打开src/page/index.js，此文件描述的就是你看到的界面，有hello world字样。

它是一个React组件，如果你还不熟悉React，没关系，你现在只需要知道这个文件描述了一个界面，你会看到熟悉的div等html元素，后面会讲React的相关知识。

试着修改一下hello world，去浏览器你会发现界面立即改变了。这就是Gatsby的热重载机制，以提高开发效率。

热重载：本质上，当您运行Gatsby开发服务器时，Gatsby站点文件在后台会被“监视”——任何时候保存文件，您的更改都会立即在浏览器中反映出来。您不需要硬刷新页面或重新启动开发服务器。

JSX:

js的扩展语法，React用它描述界面。类似下面代码，混合xml和js:

import React from "react"

export default () => <div>Hello world!</div>

而纯js的写法更像下面这样：

import React from "react"

export default () =