时间：2023-07-29 00:36:01 | 来源：网站运营
时间：2023-07-29 00:36:01 来源：网站运营
更现代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基础概念：
在线咨询
$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以看到界面。热重载：本质上，当您运行Gatsby开发服务器时，Gatsby站点文件在后台会被“监视”——任何时候保存文件，您的更改都会立即在浏览器中反映出来。您不需要硬刷新页面或重新启动开发服务器。JSX:
import React from "react"export default () => <div>Hello world!</div>而纯js的写法更像下面这样：import React from "react"export default () => React.createElement("div", null, "Hello world!")浏览器并不认识jsx，只是gatsby附带的工具把它转换成了浏览器认识的！组件是站点的构建块；它是描述UI（用户界面）的一部分的自包含代码。简单说，在React中就是用来描述界面的jsx代码。
<button>，而是可以自定义<MyButton>这样。import React from "react"export default () => <h1>This is a header.</h1>父组件引用header：import React from "react"import Header from "../components/header"export default () => ( <div style={{ color: `teal` }}> <Header /> <p>Such wow. Very React.</p> </div>)浏览器就会把Header显示出来：<Header headerText="About Gatsby" />你可以在组件jsx中，这么访问它：<h1>{props.headerText}</h1><Link />组件import React from "react"import { Link } from "gatsby"import Header from "../components/header"export default () => ( <div style={{ color: `purple` }}> <Link to="/contact/">Contact</Link> <Header headerText="Hello Gatsby!" /> <p>What a world.</p> <img src="https://source.unsplash.com/random/400x200" alt="" /> </div>)Gatsby<Link />组件用于在站点内的页与页之间进行链接。对于GATSBY站点未处理的页面的外部链接，请使用常规HTML<a>标签$ gatsby build然后生成静态文件到public/目录下，可将此目录上传到任何静态服务，比如Github Page。斜杠青年：独立开发者/业余交易员/传统文化爱好者
更多原创尽在公众号: 「优雅的程序员呀」。全栈。程序员赚钱之道。优雅的技术，优雅的赚钱。
关注公众号，可以加我好友交流，也可加群技术交流哦。
关键词：基础,概念,教程,现代化,方式,系列
