【基础】创建React工程(空工程&脚手架)

77 阅读2分钟

Vite创建空项目

安装Node

确保你已安装 Node.js 18+,如果没有安装,请前往 Node.js 官网 下载并安装。

node -v

创建项目

使用以下命令创建一个新的 React 项目(支持 TypeScript):

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

如果你想用 JavaScript,而不是 TypeScript,可以去掉 -ts:

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

启动项目

cd my-react-app
npm install
npm run dev

使用 Create React App(CRA)创建空项目

安装并创建项目

npx create-react-app my-react-app

如果你想用 TypeScript:

npx create-react-app my-react-app --template typescript

启动

cd my-react-app
npm start

Ant Design Pro创建脚手架项目

官网: pro.ant.design/zh-CN/

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

使用 npm 安装

提供了 pro-cli 来快速的初始化脚手架

npm i @ant-design/pro-cli -g
pro create myapp

选择 umi 的版本

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

如果选择了 umi@3,还可以选择 pro 的模板,simple 是基础模板,只提供了框架运行的基本内容,complete 包含所有区块,不太适合当基础模板来进行二次开发

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

安装依赖

$ cd myapp && tyarn
// 或
$ cd myapp && npm install

启动

选择package.json中的命令来安装

npm run start:dev