Ant Design of React 创建项目及运行环境

Ant Design of React 学习笔记(1)

创建项目及运行环境

本文使用 create-react-app 创建一个 TypeScript 项目,并引入 antd。

1.命令行cd到对应的目录,这里是npm下回车运行,其他如pnpm yarn参考官网

npx create-react-app antd-demo --template typescript

antd-demo就是项目名称,可以自己随意起

2.进入项目并运行 cd到项目下运行 npm run start

cd antd-demo

npm run start

此时浏览器会访问 http://localhost:3000/ ,看到 Welcome to React 的界面就算成功了。

3.安装Ant design

npm install antd --save

回传运行安装完成

在package.json 文件下会看到antd 相关信息,如果要使用sass或者less预编样式、axios数据请求这些按需npm安装即可。
react-router-dom这个是路由,后面要用到路由跳转,项目目录下运行

npm install react-router-dom

相关推荐
软件工程师文艺4 小时前
从0到1:Claude Code如何用React构建CLI应用
前端·react.js·前端框架
M ? A4 小时前
Vue 迁移 React 实战:VuReact 一键自动化转换方案
前端·vue.js·经验分享·react.js·开源·自动化·vureact
yuki_uix5 小时前
虚拟 DOM 与 Diff 算法——React 性能优化的底层逻辑
前端·react.js·面试
M ? A7 小时前
Vue转React实战:defineProps精准迁移实战
前端·javascript·vue.js·经验分享·react.js·开源·vureact
M ? A11 小时前
VuReact 编译器核心重构:统一管理组件元数据收集
前端·javascript·vue.js·react.js·重构·开源
M ? A12 小时前
Vue转React最佳工具对比:Vuera、Veaury与VuReact
前端·javascript·vue.js·经验分享·react.js
GISer_Jing13 小时前
告别手搓架构图!Excalidraw+AI Skills 高效绘制手绘风技术图
前端·人工智能·react.js
GISer_Jing13 小时前
React 18+ 高级特性实战与面试精讲
javascript·react.js·面试
彧翎Pro13 小时前
跨平台开发新选择:Flutter与React Native深度对比
flutter·react native·react.js