【React入门】绝对不会失败的React（Next.js 13）研讨会 #2
首先
这篇文章是为那些想要学习React的人准备的。
由于它是由多篇文章组成的，因此建议从第一篇开始阅读。
此外，如果你是第一次接触React，可以从以下的文章开始学习，无需进行环境设置，这样可以更顺利地进行学习！
由于React官方教程已经从Create React App推荐使用框架开始，我们将使用Next.js 13来学习React。
这个研讨会的目标
可以学习的内容
-
- 关于Next.js的环境配置和组件
原子设计和Hooks的基础 现在在这里
API调用（Fetch API）
样式设计（Tailwind CSS）
最后的产物
创建一个构成列表的组件
但是需要复习一下，在React中，我们将返回JSX（类似于HTML的语法）的函数称为组件。
在这里，我们将创建用于构建事件列表页面的组件。
在这之前，我将对原子设计进行解释。
原子设计是一种设计方法。
因为时间紧迫，我向ChatGPT寻求了解释。
原子设计是一种旨在提高网络应用和网站设计流程效率，并促进组件化方法的方法论。它将设计元素分解为小的组件（原子），然后将它们组合成更大的组件（分子）和布局（有机体）。
在原子设计中，将设计元素分为5个主要层次进行考虑。每个层次都扮演着表达设计层次和可重复利用性的角色。
原子（Atoms）：原子是设计的基本要素。按钮、文本输入框、图标等都是可以独立存在的最小要素。原子是可重复利用的，提供一致的设计。
分子（Molecules）：分子是由多个原子组合而成的小组。例如，搜索表单和导航菜单都可以看作是分子。分子通过原子的组合形成功能单元。
有机体（Organisms）：有机体是更大的组件，由分子和其他原子组合而成。头部区域和底部区域都属于有机体。有机体作为用户界面的一部分，可以独立运作，并包含多个分子和原子。
模板（Templates）：模板表示设计的具体布局和结构。它定义了有机体和分子的布局模式，并在保持设计一致性的同时嵌入内容。模板提供了设计框架，但不包含实际内容。
页面（Pages）：页面是用户实际可以看到的具体网页或屏幕。模板中嵌入了内容，并形成实际的用户体验。页面根据特定的上下文和目的进行设计，并成为用户进行互动的对象。
本次根据原子设计的思路，从小型组件开始创建，并利用它们来构建最终的界面。
首先创建一个components/目录，然后在该目录下进一步放置组件，为此创建atoms、molecules、organisms、templates四个子目录。
创建标题组件
由于标题已经无法进一步分解为更小的组件元素，因此在components/atoms目录中创建Headline.tsx文件。
export default function Headline() {
return (
<h1>これは見出しコンポーネントです。</h1>
)
}
标题组件是一个简单的组件，返回一个
标签。
接下来，我们将修改app/events/list/page.tsx文件，将该组件显示在事件一览页面上。
// 作成した Headline コンポーネントを import する
import Headline from "@/components/atoms/Headline";
export default function EventList() {
return (
<div>
{/* <h1>イベント一覧</h1> を以下に書き換える*/}
<Headline />
</div>
)
}
请访问 http://localhost:3000/events/list，并确保标题如下所示！
然而，在目前创建的Headline组件中，只能显示“这是一个标题组件”，所以即使创建了组件，也无法在其他地方重复使用。我们将使Headline组件能够根据使用的位置动态更改要显示的字符串。
以下是对Headline组件进行修改的方式。
export default function Headline(props: {title: string}) {
return (
<h1>{props.title}</h1>
)
}
我也会对屏幕侧的app/events/list/page.tsx进行修改。
import Headline from "@/components/atoms/Headline";
export default function EventList() {
return (
<div>
<Headline title="ここはイベント一覧画面です" />
</div>
)
}
如果访问 http://localhost:3000/events/list，
如果标题已更改为“这是事件列表页面”，则表示正常！
在React组件中，可以使用一个叫做props（即属性的缩写）的变量来接收从组件外部传入的值，就像函数的参数一样。在Headline组件的例子中，我们准备了一个叫做title的props，用来接收想要显示的字符串（这里是事件列表页面）从外部传入并进行显示。通过这种方式，我们可以在各种不同的地方重复使用Headline组件！
我们将继续创建相同类型的卡片组件。
创建卡片组件
卡片组件可以分解成标题、链接和框架等部分，但即使分解了，也不能带来更多的意义，因此我们称其为”molecules”。
在components/molecules目录下创建Card.tsx文件，并复制以下内容。
import Link from "next/link"
type CardProps = {
url: string
startAt?: string
title?: string
description?: string
}
export default function Card({url, startAt, title, description}: CardProps) {
return (
<div className="border">
<div>
<span>{startAt}</span>
<h2 >
<Link href={url} target="_blank">{title}</Link>
</h2>
<p className="text-gray-500">{description}</p>
<div>
<Link href={url} target="_blank">詳しく見る</Link>
</div>
</div>
</div>
)
}
本次我们将接收url、startAt、title和description作为props使用。让我们试着在事件列表页面上展示一下。
将app/events/list/page.tsx修正如下：
import Headline from "@/components/atoms/Headline";
import Card from "@/components/molecules/Card";
export default function EventList() {
return (
<div>
<Headline title="ここはイベント一覧画面です" />
<Card
title="【React入門】絶対に躓かないReact（Next.js）ワークショップ #2"
description="最近フロントエンドを学び始めた人や、これからフロントエンドを学んで行きたい人向けに、Reactのハンズオンを開催します！"
startAt="2023-07-27 19:30"
url="https://okinawa-frontend.connpass.com/event/289268/"
/>
</div>
)
}
Hooks的基础（关于状态管理）
在React中，为了处理应用程序的状态，提供了一种称为Hooks的功能。状态指的是诸如“是否正在加载”、“用户输入的字符串”、“获取的数据”等信息。
这次，我们将使用Hooks来在屏幕上显示从conpass获取的活动信息！在这里，我想介绍两个经常使用的Hooks。
使用状态
首先，我們來解釋一下在Hooks中最常使用的useState。
useState是一個用於維持和更新狀態的Hooks。
在活动列表页面上添加示例代码并查看效果。
将app/events/list/page.tsx文件修改如下。
作为一个咒语，我们将继续前进。如果你有兴趣，请另外查询了解。
"use client"
import Headline from "@/components/atoms/Headline";
import Card from "@/components/molecules/Card";
import { useState } from "react";
export default function EventList() {
const [count, setCount] = useState(0)
return (
<div>
<Headline title="ここはイベント一覧画面です" />
<Card
title="【React入門】絶対に躓かないReact（Next.js）ワークショップ #2"
description="最近フロントエンドを学び始めた人や、これからフロントエンドを学んで行きたい人向けに、Reactのハンズオンを開催します！"
startAt="2023-07-27 19:30"
url="https://okinawa-frontend.connpass.com/event/289268/"
/>
<p>count: {count}</p>
<button className="rounded-lg bg-purple-500 px-8 py-3 text-center text-sm hover:bg-purple-600" onClick={() => setCount(count+1)}>カウントアップ</button>
</div>
)
}
useState函数以状态的初始值为参数，并返回一个包含[状态，用于更新状态的函数]的数组。
// const [状態, 状態を更新するための関数] = useState(初期値)
const [count, setCount] = useState(0)
在示例代码中，当点击按钮时执行setCount(count + 1)，因此count会逐渐增加1。
你是否考虑过这种想法：“可以声明一个常规变量count，并将其加1后重新赋值？”很聪明！然而，这样做并不会改变屏幕的显示。
请注意，在React中，只有在状态改变时才会进行重新渲染，从而改变屏幕的显示效果。
useEffect的作用
useEffect是用于将组件与外部系统同步的Hooks。
更具体地说，可以在渲染完成后或依赖变量发生变化时执行传递给useEffect的函数。
作为使用案例，包括屏幕显示时的API调用等相关内容。
为了确认实际情况，我们将在活动列表页面添加样本代码。我们将修改app/events/list/page.tsx如下。
"use client"
import Headline from "@/components/atoms/Headline";
import Card from "@/components/molecules/Card";
import { useEffect, useState } from "react";
export default function EventList() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log("countが更新されました")
}, [count])
return (
<div>
<Headline title="ここはイベント一覧画面です" />
<Card
title="【React入門】絶対に躓かないReact（Next.js）ワークショップ #2"
description="最近フロントエンドを学び始めた人や、これからフロントエンドを学んで行きたい人向けに、Reactのハンズオンを開催します！"
startAt="2023-07-27 19:30"
url="https://okinawa-frontend.connpass.com/event/289268/"
/>
<p>count: {count}</p>
<button className="rounded-lg bg-purple-500 px-8 py-3 text-center text-sm hover:bg-purple-600" onClick={() => setCount(count+1)}>カウントアップ</button>
</div>
)
}
useEffect 函数会返回一个包含要执行的函数作为第一个参数和依赖变量数组作为第二个参数的数组。
useEffect(() => {
// レンダリングが終了時や、依存関係の変化時に実行したい処理
}, [/* 依存する変数 */])
在样本代码中，由于指定了count作为依赖变量，所以在初始渲染完成以及count更新时都会执行console.log()。
当用户按下按钮时，count会增加1。这样的直接处理被称为”副作用”，它是用户根据用户按下按钮和count变化检测后执行console.log()的间接处理。
给出以下内容的中文表达，只需要一个选项：
#2 总结
关于原子设计和Hooks的基础知识，按照原子设计的要求，我们创建了一些在列表页面上需要的组件，并学习了React的Hooks，包括useState和useEffect。下一步，我们将利用所学的Hooks来调用connpass的API，并在页面上显示获取的活动信息。请务必点赞和收藏！
