40个免费网站推广平台,做行业网站能赚钱吗,建设电子商务网站的步骤,开发一个网站多少钱?快速开始React开发#xff08;一#xff09;
React是一个JavaScript库#xff0c;用于构建交互式网站#xff0c;并且能够快捷创建SPA#xff08;Single Page App#xff09;#xff0c;其组件化的思想也是被一再传播#xff0c;无论是普通的Web网站还是嵌入移动端交互…快速开始React开发一
React是一个JavaScript库用于构建交互式网站并且能够快捷创建SPASingle Page App其组件化的思想也是被一再传播无论是普通的Web网站还是嵌入移动端交互都常见到其身影那么搞起~~
1、快速创建项目CRA
CRA (Create React App) 是 React 官方提供的一个脚手架工具用于快速创建和搭建 React 项目
在此之前我们先配置一下马上需要用到的node环境nvm也推荐大家看一下考虑到可能需要不同node版本管理这里不过多介绍提供传送门回来时候的状态应该是node和npm是能用的了 Node.js安装教程2025) 零基础Node包管理器nvm安装及nodejs安装教程2025年版 接下来什么都不需要做运行这行代码就可以生成一个完整的项目
npx create-react-app my-app这里我打算使用TypeScript作为主要的开发语言添加--template参数指定模板
npx create-react-app my-app --template typescript啊哦别慌小状况提示需要升级了那就妥协一下 升级到最新的create-react-app
npm uninstall -g create-react-app
npm install -g create-react-applatest好了升到5.1.0满足要求Let’s try again!
耐心等待一小会儿看到这个就说明项目创建成功啦我们可以用下面红框的命令进入项目并运行一下看看
此时会需要选择一下浏览器页面自动跳转“小”功告成
2、项目结构
使用Trae打开项目目录肉眼可见这几项 我们简要看看每一项的作用
node_modules/ 存放项目所有的依赖包通过 npm/yarn 安装的包都在这里注不需要提交到代码仓库运行命令就能下 public/ 存放静态资源文件包含主页面模板 index.html存放网站图标、manifest等公共资源 src/ 项目源代码目录包含入口文件和主要组件开发主要在这个目录下进行 package.json项目配置文件README.md项目说明文档.gitignoreGit忽略配置package-lock.json依赖版本锁定文件tsconfig.jsonTypeScript 编译和类型检查的配置文件ts项目特有
以上大概有些印象即可主要开发用到比较多的还是src/这里将会不断随着业务的复杂程度扩充之后则需要更加细致进行分类管理比方说下面这样
my-app/
├── src/
│ ├── api/ # API 接口管理
│ │ ├── user.ts # 用户相关接口
│ │ └── index.ts # API 统一导出
│ │
│ ├── assets/ # 静态资源
│ │ ├── images/ # 图片资源
│ │ ├── styles/ # 全局样式
│ │ └── fonts/ # 字体文件
│ │
│ ├── components/ # 公共组件
│ │ ├── Button/
│ │ │ ├── index.tsx
│ │ │ └── style.module.scss
│ │ └── index.ts
│ │
│ ├── constants/ # 常量配置
│ │ ├── api.ts # 接口地址
│ │ └── enum.ts # 枚举值
│ │
│ ├── hooks/ # 自定义 Hooks
│ │ └── useAuth.ts
│ │
│ ├── layouts/ # 布局组件
│ │ └── MainLayout.tsx
│ │
│ ├── pages/ # 页面组件
│ │ └── Home/
│ │ ├── components/ # 页面级组件
│ │ ├── index.tsx
│ │ └── style.module.scss
│ │
│ ├── store/ # 状态管理
│ │ ├── modules/ # 模块分类
│ │ └── index.ts
│ │
│ ├── types/ # TypeScript 类型
│ │ └── user.d.ts
│ │
│ ├── utils/ # 工具函数
│ │ ├── request.ts # 请求封装
│ │ └── storage.ts # 存储相关
│ │
│ ├── App.tsx
│ └── index.tsx
│
├── public/ # 静态公共资源
├── tests/ # 测试文件目录
├── package.json
└── tsconfig.json一点点开始吧。。。
