React框架创建项目详细流程-项目的基本配置-项目的代码规范

文章目录

React创建项目流程与规范
- 项目规范
- 项目配置
- 目录结构
- 样式重置
- Router配置
- Redux状态管理
- axios配置

React创建项目流程与规范

项目规范

项目规范: 在项目中都会有一些开发规范和代码风格, 下面介绍一下我采用的规范与风格

文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;
JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;
CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);
整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;
所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;
组件内部的状态，使用useState、业务数据全部放在redux中管理;
函数组件内部逻辑代码基本按照如下顺序编写代码:

组件内部state管理;

redux的hooks代码;

其他hooks相关代码(比如自定义hooks);

其他逻辑代码;

返回JSX代码;
redux代码规范如下:

redux目前我们学习了两种模式, 根据自己的情况选择普通模式还是rtk模式

每个模块有自己独立的reducer或者slice，之后合并在一起;

redux中会存在共享的状态、从服务器获取到的数据状态;
网络请求采用axios

对axios进行二次封装;

所有的模块请求会放到一个请求文件中单独管理;
项目使用AntDesign或者MUI(Material UI)

其他规范在项目中根据实际情况决定和编写

项目配置

创建项目的方式:create-react-app

项目配置:

配置项目的icon, 将图标换为自己项目的图标

配置项目的标题: 在public文件夹下的index.html中配置项目的标题

<title>网易云音乐</title>

配置jsconfig.json:这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成, jsconfig.json是为了让vs code的代码提示更友好, 按需求决定是否配置;

{"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {"@/*": ["src/*"]},"jsx": "preserve","lib": ["esnext","dom","dom.iterable","scripthost"]}
}

通过craco配置别名和less文件(不需要集成less只需要配置别名):

在项目中层级嵌套会很深, 我们导入文件通常会有../../../甚至更多的上一级目录; 因此我们配置别名解决这个问题, 我的配置是使用@符号表示根目录

首先安装craco: npm i @carco/craco -D

如果使用的最新的React版本, 则需要npm i @craco/craco@alpha -D来安装

安装完成, 在项目根目录下创建craco.config.js文件

const path = require('path')const reslove = pathname => path.resolve(__dirname, pathname)module.exports = {webpack: {alias: {"@": reslove("src")}}
}

然后修改根目录下package.json文件中的脚本, 修改为craco启动, 修改如下:

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"
},

别名配置完成, 接下来我们配置一下less, 不需要集成less跳过即可

首先进行安装: npm i craco-less

最新版本React同样会有适配问题, 安装方式: npm i craco-less@2.1.0-alpha.0

安装完成按照如下方式配置less, 配置完成创建一个less文件测试一下, 样式生效就配置成功了

const path = require('path')
const CracoLessPlugin = require('craco-less')const reslove = pathname => path.resolve(__dirname, pathname)module.exports = {// lessplugins: [{plugin: CracoLessPlugin}],webpack: {alias: {"@": reslove("src")}}
}

目录结构

接下来对项目src文件夹下进行目录结构的划分, 我是按照如下方式进行划分的:

assets: 存放静态资源 (如css, img等等)

base-ui: 存放一些通用的组件, 不只是本项目, 其他项目也会使用的组件

components: 存放本项目中通用的组件

hooks: 自定义的hook函数

router: 路由相关

services: 网络请求相关

stores: 状态管理, redux相关

utils: 封装的工具函数

views: 页面相关

样式重置

对默认CSS样式进行重置:

下载normalize.css, 再在src中的index文件引入normalize.css

可以通过npm安装npm i normalize.css

import React from 'react'
import ReactDOM from 'react-dom/client'// 引入样式重置文件
import "normalize.css"
import App from './App'const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

创建一个reset.css文件, 用来自己编写一些样式的重置

* {margin: 0;padding: 0;
}a {text-decoration: none;color: #000;outline: none;
}ul, li {list-style: none;
}input {outline: none;border: none;
}i {font-style: normal;
}

并且引入

import React from 'react'
import ReactDOM from 'react-dom/client'// 引入样式重置文件
import "normalize.css"
import "./assets/css/reset.css"import App from './App'const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

Router配置

安装: npm i react-router-dom

安装完成配置映射关系即可, 示例代码如下:

import React from "react"
import { Navigate } from "react-router-dom"// 懒加载
const Home = React.lazy(() => import("@/views/home"))
const Detail = React.lazy(() => import("@/views/detail"))
const Entire = React.lazy(() => import("@/views/entire"))const routes = [{path: "/",element: <Navigate to="/home"/>},{path: "/home",element: <Home/>},{path: "/detail",element: <Detail/>},{path: "/entire",element: <Entire/>}
]export default routes

配置完成使用, 还需要在src目录下index.js文件中, 对App组件进行包裹

import React, { Suspense } from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"import App from "./App"const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<BrowserRouter><Suspense fallback="lodaing"><App/></Suspense></BrowserRouter>
)

Redux状态管理

Redux有两种模式

普通方式: 目前项目中依然使用率非常高;

@reduxjs/toolkit方式: 推荐方式, 未来的趋势;(下面简单演示一样rtk模式)

rtk模式安装: npm i @reduxjs/toolkit react-redux

安装完成后再store文件夹下的index.js中进行配置

import { configureStore } from '@reduxjs/toolkit'const store = configureStore({reducer: {}
})export default store

同样需要对根组件App进行包裹

import React, { Suspense } from "react"
import ReactDOM from "react-dom/client"
import { Provider } from "react-redux"import App from "./App"
import store from "./stores"const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<Provider store={store}><App/></Provider>
)

axios配置

项目中我采用axios发送网络请求

首先安装axios: npm i axios

一般会对axios进行二次封装, 代码如下

import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";class YQRequest {// 传入默认配置信息, 创建新的实例constructor(baseURL, timeout=10000) {this.instance = axios.create({baseURL,timeout})// 响应成功的拦截, 返回res.data// this.instance.interceptors.response.use(res => {//   return res.data// }, err => {//   return err// })}// 1.封装requestrequest(config) {// 返回一个Promise, 对数据转换return new Promise((reslove, reject) => {this.instance.request(config).then(res => {reslove(res.data)}).catch(err => {reject(err)})})}// 2.封装getget(config) {//  调用自己的request函数return this.request({ ...config, methods: "get" })}// 3.封装psotpost(config) {//  调用自己的request函数return this.request({ ...config, methods: "post" })}
}export default new YQRequest(BASE_URL, TIMEOUT)

export const BASE_URL = "http://codercba.com:1888/airbnb/api"
export const TIMEOUT = 10000

React框架创建项目详细流程-项目的基本配置-项目的代码规范相关推荐

部署 Node.js 项目详细流程
作为一个自(mo)律(yu)的前端,不能总是依靠后端大佬部署前端项目,自己动手,丰衣足食
【Springboot+vue项目开发】：网盘系统项目开发流程（03 微服务项目的划分及构建）
03 微服务项目的划分及构建项目链接问题1:IDEA如何将git下来的是工程转为maven工程 IDEA如何将git下来的是工程转为maven工程问题2:jdk1.8的选用问题3:Maven工 ...
WebStackHugo导航开源项目部署流程和内容一键配置
本项目是基于纯静态的网址导航网站 webstack.cc 制作的Hogo主题,基于开源项目的基础这里总结了一下在 centos7 云服务器部署和本地一键配置数据更新静态页面的笔记. 不得不说,Hugo ...
一个项目的流程和前期的准备工作
项目开发流程产品立项(主要是项目经理负责) (1) 客户的需求分析 (2) 整理需求分析文档 (3) 项目成立会产品原型(产品) (1) 设计产品原型图 (2) ui设计 - ps工具 AI等项 ...
团队项目开发流程总结
项目 1.项目流程在确定好开发人员和项目需求之后,就需要进行任务分配和项目排期,团队成员需要根据个人的情况去理性的评估完成任务内容自己所需要花费的天数.所谓承诺即交付,项目团队开发成员在确定过任务完 ...
企业开发项目完整流程
企业开发项目完整流程文章目录企业开发项目完整流程 1.需求分析 2.设计(概要设计.详细设计) 3.技术选型(对于新项目很重要) 4.初始化/引入需要的技术/组件/框架 5.写demo 6.写代码 ...
总结后软件开发项目基本流程-先流程图-后描述人员分工和具体工作-自己备学
软件开发项目基本流程和工作 1.项目启动阶段-人员分工产物名称成果描述–负责人调研文档了解项目背景,了解项目干系人目标方向-产品经理团队组建确认团队人员及配置-产品总监业务梳理明确项目的目标
SpringBoot整合Mybatis超详细流程
SpringBoot整合Mybatis超详细流程文章目录 SpringBoot整合Mybatis超详细流程前言详细流程 0.引入Mybatis 1.创建数据 2.创建程序目录 3.理解后台访问流 ...
计算机应用基础实训项目三excel,计算机应用基础实训项目三 Excel 综合应用
计算机应用基础实训项目三 Excel 综合应用Tag内容描述: 1.计算机应用基础实训教程计算机应用基础实训项目二,Word,综合应用以日常应用为基础,设计一个综合运用 Word 基本操作技能解决实 ...