React の開発環境構築にはいくつか方法があるが、
一番イージーなのが create-reacp-appコマンド。
npx create-react-app sample_appとするだけで、
一発で動く状態の React アプリができる。
しかしカスタマイズ性が低いので、独自で環境構築できるようになりたかった。
そこで、
JavaScript のモジュールバンドラーであるWebpackを始めとし、
コピペで使いまわし可能な React開発環境を作った。
| 技術 | バージョン |
|---|---|
| React | 17.0.1 |
| TypeScript | 4.1.5 |
| Webpack | 5.22.0 |
| ESLint | 7.2.0 |
| Prettier | 2.2.1 |
react-ts-dev
├── package-lock.json
├── package.json
├── src
│ ├── App.tsx
│ ├── Index.tsx
│ ├── app
│ │ ├── hooks.ts
│ │ └── store.ts
│ ├── app.module.css
│ ├── components
│ │ └── Test.tsx
│ ├── images
│ │ └── logo.svg
│ ├── index.html
│ └── slices
│ └── counterSlice.ts
├── tsconfig.json
├── typings.d.ts
└── webpack.config.js
# パッケージインストール
npm i
# サーバー起動
npm start
http://localhost:9000
にアクセス
# ビルドする場合
# 開発モード
npm run dev
# 本番モード(コードを圧縮)
npm run build