运用脚手架搭建react简易项目框架create-react-app [webpack] create-react-ap

create-react-app [webpack]

运用create-react-app这个工具去创建react项目，通过npm install -g create-react-app

npx create-react-app my-app
cd my-app
npm start

项目目录结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

接着就可以在浏览器打开http://localhost:3000看到项目跑起来了。

如果准备部署到生产环境，运行npm run build就可以得到dist文件，部署到服务器上就即可。

webpack: 缺点：项目过大导致打包慢，热更新慢。

vite

yarn create vite

然后选择react

有一个是react js、和 ts版本的简易的脚手架，按需选择就好。

cd my-app
npm start

即可。