Least React

最小限で、Reactを構築する。

Directory Structure

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

Create directory

mkdir least_react

cd least_react

Install

pnpm

pnpm add react react-dom

pnpm

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

Environment Build

index.html

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()],
})

app.tsx

tsx

import React from 'react'

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

export default App

main.tsx

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>,
  )
}

package.json

json

{
  "name": "@apps/least_react",
  "scripts": {
    "dev": "vite --host"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.7.2",
    "vite": "^6.0.0"
  }
}

Run

pnpm

pnpm run dev

Accesse Browser

http://localhost:5173/

Least React ​

Directory Structure ​

Create directory ​

Install ​

Environment Build ​

vite.config.ts ​

app.tsx ​

main.tsx ​

package.json ​

Run ​

Accesse Browser ​

Least React

Directory Structure

Create directory

Install

Environment Build

vite.config.ts

app.tsx

main.tsx

package.json

Run

Accesse Browser