从零开始搭建React开发项目之抖音“剪映”——创作课堂（基础入门篇）

前言

React是近几年来前端项目开发非常火的一个框架，其背景是Facebook团队的技术支持，市场占有率也很高，对于很多新手来说可能很多人都在犹豫是选react还是vue，如果时间充裕的话还是首选react(虽然有一点难)，但不得不说React无论从性能上还是思想上（组件化）都比vue更为先进。下面我带来的react组件化设计希望能够帮助到一些和我一样刚学习react的新手

组件展示

• 剪映原版

• 仿剪映盗版

项目搭建与安装依赖

1.项目初始化 npm init @vitejs/app 选择react （这里我使用的是vite搭建项目，如果大家用其他的更顺手也可以用其他的）
2.安装相关依赖 npm react-router react-router-dom
3.其他相关依赖* npm i axios 使用ajax请求服务端接口(这里我使用的是fastmock www.fastmock.site/#/  在线模拟ajax请求)* npm i classnames 用来合并类名的，存在多个类名变量时，想添加到对应的元素中* npm i styled-components 使用atyled-components设置页面样式* npm i swiper 使用swiper轮播图 注意下载的版本是4.5.0的（这里我先前安装的是最新版本的不会用导致轮播图轮播根本动不了）
4.创建文件夹* 根目录 public 静态资源目录 不需要在src 里面引入* src下* api 封装axios接口* assets 放置静态资源 如图片/字体图标/全局样式* components 放置通用组件* pages 单页面存放* routers 独立配置文件 把组件封装到一起

5.启动项目 npm run dev 默认在3000端口
6.初始化设置* 不同型号手机端适应页面* 在public文件夹下创建js子文件夹创建adapter.js文件这里设置20px为1rem 后面所有的大小将不再使用px，使用rem代替px确保能够适应所有的手机型号var init = function () {var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;if (clientWidth >= 640) {clientWidth = 640;}var fontSize = 20 / 375 * clientWidth;document.documentElement.style.fontSize = fontSize + "px";}init();window.addEventListener("resize", init);``````* 下载相应的图标、图片和对样式reset* 在assets 下创建font、image和styles文件夹* 字体图标就在iconfont上去下载自己想要的或者使用font-awesome组件库* image 可以下载需要的图标或者等会在fastmock传入数据（可要可不要）* reset 就是对页面进行样式重置（这里代码太长，推荐随便到掘金或者github上找一个比较全的样式重置就好了）* 导入数据* api文件夹下创建request.js文件 封装axios 首先在fastmock上创建好数据（这里是我的fastmock地址）import axios from 'axios’export const getCourse=()=>axios.get(‘https://www.fastmock.s