Zenn
🌏

React 環境構築

2025/02/12に公開
React
TypeScript
Vite
tech

React環境構築

 最近Reactに触れる機会が増えたので、環境構築から入門してみたいと思います。

参考

環境構築する

mkdir react

cd react

ディレクトリ構成

 以下のような構成で、作成します。

.
├── index.html
├── package.json
├── src
│   ├── app.tsx
│   └── main.tsx
├── tsconfig.json
└── vite.config.ts

インストール

pnpm add react react-dom

pnpm add -D @types/react @types/react-dom vite @vitejs/plugin-react-swc

コードを記述する

 package.json

{
  "name": "@apps/react",
  "private": true,
  "scripts": {
    "dev": "vite --host",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "vite": "^6.1.0"
  }
}

 tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

 index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Least React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
})

 src/app.tsx

import React from 'react'

const App = () => {
  return <h1>React</h1>
}

export default App

 src/main.tsx

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './app'

const rootElement = document.getElementById('root')
const root = rootElement ? createRoot(rootElement) : console.error('Root element not found')

if (root) {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

起動する

pnpm dev

 http://localhost:5173/にアクセスすると、以下のような画面が表示されます。

ビルドする

 以下のコマンドで、distディレクトリにビルドされたファイルが作成されます。

pnpm build

おわりに

 今まで、Reactを試す際、以下のコマンドから、起動していました。

pnpm create vite

https://vite.dev/guide/

 感覚で、環境構築をしていたことがあったので、１から構築してみました。Reactをこれから試す方々への参考になれば幸いです。

参考

Discussion