Gatsby项目教程：使用和样式化React组件

裴麒琰

于 2025-05-30 09:09:01 发布

阅读量251

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00210/article/details/148325453

版权

Gatsby项目教程：使用和样式化React组件

gatsby The best React-based framework with performance, scalability and security built in. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby

前言

在上一部分教程中，我们创建了第一个Gatsby站点并部署到了线上。现在，我们将深入学习如何使用React组件来构建和定制我们的Gatsby站点。

React基础概念

什么是React？

React是Gatsby底层使用的JavaScript库，用于构建用户界面(UI)。React允许我们将UI分解为可重用的组件。

例如，一个电商网站的产品页面可以分解为：

<Navbar>导航栏组件
<Sidebar>侧边栏组件
<ProductGrid>产品网格组件

组件可以嵌套使用，这种模式称为组合。例如，<ProductGrid>可以由多个<ProductCard>组件组成。

React组件是什么？

React组件本质上是一个返回React元素的函数。React元素是描述DOM结构的对象。

最简单的编写方式是使用JSX，它看起来像在JavaScript中写HTML：

const Greeting = () => {
  return <h1>Hello world!</h1>
}

创建页面组件

在Gatsby中，有两种主要组件类型：页面组件和构建块组件。

更新首页内容

打开src/pages/index.js文件
更新内容如下：

import * as React from 'react'

const IndexPage = () => {
  return (
    <main>
      <h1>欢迎来到我的Gatsby站点！</h1>
      <p>我正在通过Gatsby教程构建这个站点。</p>
    </main>
  )
}

export const Head = () => <title>首页</title>

export default IndexPage

创建关于页面

新建src/pages/about.js文件
添加以下内容：

import * as React from 'react'

const AboutPage = () => {
  return (
    <main>
      <h1>关于我</h1>
      <p>你好！我是这个站点的创建者，使用Gatsby构建。</p>
    </main>
  )
}

export const Head = () => <title>关于我</title>

export default AboutPage

Gatsby核心概念：Gatsby会自动将src/pages目录下的默认导出组件转换为页面，文件名决定路由路径。

使用`<Link>`组件

<Link>是Gatsby提供的预构建组件，用于站点内页面导航，比传统<a>标签有更好的性能优势。

添加页面链接

在首页添加关于页面的链接：

import * as React from 'react'
import { Link } from 'gatsby'

const IndexPage = () => {
  return (
    <main>
      <h1>欢迎来到我的Gatsby站点！</h1>
      <Link to="/about">关于页面</Link>
      <p>我正在通过Gatsby教程构建这个站点。</p>
    </main>
  )
}

import * as React from 'react'
import { Link } from 'gatsby'

const AboutPage = () => {
  return (
    <main>
      <h1>关于我</h1>
      <Link to="/">返回首页</Link>
      <p>你好！我是这个站点的创建者，使用Gatsby构建。</p>
    </main>
  )
}

性能提示：<Link>组件具有预加载功能，当链接进入视口或鼠标悬停时，就会开始加载目标页面资源，实现快速导航。

组件属性(Props)

Props是React组件的重要概念，允许我们创建可复用的动态组件。

组件Props示例

// 定义带props的组件
const Greeting = (props) => {
  return <p>你好 {props.name}！</p>
}

// 使用组件
const SayHello = () => {
  return (
    <div>
      <Greeting name="张三" />
      <Greeting name="李四" />
    </div>
  )
}