---
title: 卡比 React 讀書會 | Testimonials Grid Section
tags: React
---

# 卡比 React 讀書會 | Testimonials Grid Section

[直播](https://www.youtube.com/watch?v=7qOl8ENxMeg)
[GitHub](https://github.com/kayac-chang/hellox...)
[Demo](https://helloxreact-testimonials-grid...)

## 本次專案使用技術

- Tailwind
- React
- Typescript
- [Vitawind](https://vitawind-blog.vercel.app/)

## Theme - Tailwind config

- 顏色 - 命名的部分可以與專案設計師討論 (如果有這個人的話)
- 字型、字體大小 - 須注意這裡的設計稿的字體大小是 13px

## Component (Card)

分析一下畫面會發現都是相同的外觀，只是內部使用不同的顏色，所以可以共同使用同一組 component，這邊命名使用 Card

function Card(){
    return (
        <article className="min-h-[12rem] rounded-lg">
            <header>
                <!-- avatar -->
                <h2></h2>
            </header>
            <p></p>
        </article>    
    )
}

function App(){
    return (
        <main>
            <ul>
                <li>
                    <Card />
                </li>
            </ul>
        </main>
    )
}

### function component 的 props 定義 TypeScript type 的方式 (Typescript)

import React, { ReactNode } from 'react';

type ComponentProps = {
    children: ReactNode
}

function Component({ children } : ComponentProps ){
    return <>{children}</>
}

## 建立資料的迴圈

import React, { useState } from 'react';

interface Review {
    user: {
        name: string;
        avatar: string;
    };
    title: string;
    content: string;
}

function App(){
    const [reviews] = useState<Review[]>([
        {
            user: {
                name: "Daniel",
                avatar: "/assets/images/daniel.jpg"
            },
            title: "title",
            content: "content"
        }
    ])
    return (
        <ul>
            { reviews.map((review) => (
                <li key={review.title}>
                    <Card>
                        <header>
                            <Avatar {...review.user}/>
                            <h2>{review.title}</h2>
                        </header>
                        <p>{review.content}</p>
                    </Card>
                </li>
            ))}
        </ul>
    )
}