สร้างโปรเจค React

วิธีสร้างโปรเจคด้วย Vite

npm

npm create vite@latest my-app -- --template react-ts

pnpm

pnpm create vite my-app --template react-ts

yarn

yarn create vite my-app --template react-ts

bun

bun create vite my-app --template react-ts

หลังจากสร้างโปรเจค:

cd my-app
npm install  # หรือ pnpm install / yarn / bun install
npm run dev  # หรือ pnpm dev / yarn dev / bun dev

สร้างโปรเจคด้วย Next.js

npx create-next-app@latest
cd my-app
npm run dev

โครงสร้างโปรเจค

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── ...
├── package.json
└── ...

ไฟล์ที่สำคัญ

• src/main.tsx: จุดเริ่มต้นของแอป
• src/App.tsx: Component หลัก
• src/index.css: สไตล์หลัก

ตัวอย่างโค้ด

// src/App.tsx
function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
    </div>
  );
}

export default App;