基于React的元宇宙社交与社区前端项目
npm install
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
运行成功之后,简单了解一下项目文件结构。每一个组件以及子组件分的很详细。
UI库采用的是Antd。在文档中找到合适的模版,组件结构直接复制粘贴,再调整一下,在顶部引入相应的组件就可以了。具体的api配置文档里面也有,可以直接搜索关键字快速找到。
所有的api
请求方法抽离到一个文件中,利于后期查看和维护修改等。
静态文件放在static文件夹中,例如图片等。
如果组件需要单独的样式文件可以在index.jsx
同级目录下创建`.scss文件或者.less文件。
eslintrc.json
:位于根目录的文件,用于配置eslint
检查规则以及其他选项。
craco.config.js
:位于根目录的文件,用于修改webpack
配置。
路由是否正常匹配,以及子组件是否正常切换。
路由匹配是采用编程式路由。页面结构文档有路由路径列表,按照列表逐一手动输入确认,有链接按钮的可以点按钮(去编辑)。
redux状态管理是否正常。
redux采用的是reduxjs/toolkit
即redux工具包。下面有文档链接,可以去看一下基础教程中的基本使用方法。
Home组件中含有redux的演示代码。配合redux开发工具(Redux DevTools)可以确认状态是否添加成功。
src-|
|--api -------------------------所有请求api统合到这一个文件里
|--components ------------------组件文件夹
|--redux -----------------------redus的store.js文件
|--static ----------------------一些静态文件放在这里
|--App.jsx
|--App.less
|--index.js
|--page404.jsx
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。