大家好！歡迎來到React學習之旅的第三天。今天，我們將建立我們的React專案，並使用shadcn/ui來構建一個簡單美觀的UI界面。

建立專案

首先,讓我們使用Create React App建立一個新的TypeScript項目:

npx create-react-app my-react-app --template typescript
cd my-react-app

安裝和設定shadcn/ui

接下來,我們將安裝和設定shadcn/ui:

1. 安裝必要的依賴:

npm install -D tailwindcss postcss autoprefixer
npm install @radix-ui/react-icons
npx tailwindcss init -p

2. 設定Tailwind CSS。在tailwind.config.js中增加:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 在src/index.css中增加Tailwind指令:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 安裝shadcn/ui CLI:

npm i -D @shadcn/ui

5. 初始化shadcn/ui:

npx shadcn@latest init

建立一個簡單的計數器組件

現在，讓我們建立一個簡單的計數器組件，以展示我們在前兩天學到的React基礎知識:

在src/components下建立一個新文件Counter.tsx:

import React, { useState } from 'react';
import { Button } from "@/components/ui/button"

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">計數器</h2>
      <p className="text-xl mb-4">當前計數: {count}</p>
      <div className="space-x-2">
        <Button onClick={() => setCount(count + 1)}>增加</Button>
        <Button variant="outline" onClick={() => setCount(count - 1)}>減少</Button>
      </div>
    </div>
  );
};

export default Counter;

更新App.tsx

更新src/App.tsx來使用我們的新組件:

import React from 'react';
import Counter from './components/Counter';

const App: React.FC = () => {
  return (
    <div className="container mx-auto mt-10">
      <h1 className="text-3xl font-bold mb-6">我的React應用</h1>
      <Counter />
    </div>
  );
};

export default App;

執行程式

現在,讓我們運行我們的應用:

npm start

訪問 http://localhost:3000 ，應該能看到一個簡單美觀的計數器應用。

上傳到GitHub

最後,讓我們將我們的專案上傳到GitHub:

1. 在GitHub上建立一個新的儲存庫。
2. 在本地專案目錄中使用Git:

git add .
git commit -m "Initial commit: Create React counter app with shadcn/ui"
git branch -M main
git remote add origin <你的GitHub儲存庫URL>
git push -u origin main