从入门到入职（不是），React开发之——Tesla界面开发教程

前言

React是FaceBook于2013开源的项目，一经问世就在前端占据一席之地，随着近几年不断发展壮大，已成为前端主流框架。而它之所以能如此成功，主要是因为它的声明式、组件化、高效（虚拟DOM、Diff）与便捷（React Native），下面通过项目实战详细地介绍组件的设计思路与流程，如发现各种问题，请看官巨佬们轻喷并指正~🙏

准备阶段

首先我们需要创建一个React项目，我使用的是 ViteJS 来初始化本项目，当然也可以使用官方脚手架 create-react-app 来初始化，前者相对来说更快，两者各有优缺点，大家可以根据喜好选择。在VSCode终端输入:

 npm init @vitejs/app 

接着给项目命名为 Tesla --> 连续两次选择 react --> 最后根据提示进入创建的项目文件夹 --> 安装项目依赖 --> 运行下我们的项目

cd Teslanpm install
npm run dev 

紧接着我们会在3000端口看到项目已经运行起来了，最后再来介绍下本项目依赖的包：

• axios: 是一个基于 promise 的一个用于发送ajax请求的HTTP库，本质上是对AJAX的封装，用于前端获取数据。
• styled-components：是一个针对React的 css in js 类库。
• antd-mobile：提供可直接使用的前端模板，如本项目用到的Modal模态框、PopUp弹出层等。
• iconfont：图标字体库。
• propTypes：对props中数据类型进行检测及限制。

在终端命令行输入以下命令，将上面提到的包全部下载安装：

 npm i axiosnpm i styled-componentsnpm i antd-mobilenpm i prop-types 

另外，项目的数据存储在fastmock，这是一个在线接口工具，可以让你在没有后端程序的情况下能真实地在线模拟 ajax 请求，实现前后端分离。

项目实现

首先来看下界面实现的效果图： 项目预览

设计思路

通过观察Tesla 官网,可以了解到我们需要实现以下功能：（该项目仅为1.0版本，更多功能后续后慢慢添加）

• 基础界面开发：完成静态页面编写（需要有一定html+css基础）
• 模态框：点击查看详情按钮、底栏箭头以及中间部分，弹出模态框
• tab 切换：底栏弹出的模态框内实现切换效果
• 弹出层：点击CLTC综合工况按钮、底栏的对话图标，从底部出现弹出层

下面来看看项目文件结构：