React项目开发流程

一、安装脚手架

打开cmd或者使用git bash进行安装。在窗口里输入 npm install create-react-app -g，再输入create-react-app --version，如果正常显示版本号则安装成功。

二、创建React项目

窗口输入npm install create-react-app  项目名

注意：项目名称不可以过长首字母不能大写。

三、安装和配置craco和less

（一）安装craco

控制台输入命令 npm install craco

修改package.json文件

"scripts": {
    "start":"craco start",
    "build":"craco build",
    "test":"craco test"
}

（二）配置craco

在项目根目录下创建craco.config.js文件，用于修改默认配置

const path = require('path');

module.exports = {
    webpack:{
        alias:{
            "@":path.resolve(__dirname,'src'),
            "components":path.resolve(__dirname,'src/components'),
            "store":path.resolve(__dirname,"src/store")
        }
    }
}

 （三）安装less

控制台输入npm i craco-less，按照如下代码在craco.config.js配置一下

const path = require('path');
const CracoLessPlugin = require('craco-less');

module.exports = {
    webpack:{
        alias:{
            "@":path.resolve(__dirname,'src'),
            "components":path.resolve(__dirname,'src/components'),
            "store":path.resolve(__dirname,"src/store")
        }
    },

    // 配置less
    plugins:[
        {
            plugin:CracoLessPlugin
        }
    ]
}

三、重置css样式

控制台输入npm i normalize.css，我们自己也可以想一些自定义样式，并引入index.js文件中，自定义样式回覆盖掉normalize.css中的样式

四、安装路由

控制台输入npm install react-router-dom

在index.js文件中配置

import React from "react";
import ReactDOM from "react-dom/client";
import { HashRouter } from "react-router-dom";
import App from './App';

// 引入样式模板
import 'normalize.css';
// 引入自定义样式
import '@/assets/css/reset.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter>
        <App/>
    </HashRouter>
)

五、创建一个新的页面

src下创建Components文件，用来存放react项目中的组件资源，在src下创建App.jsx文件用来作为其他组件的父组件

import React,{Component} from "react";

class App extends React.Components{
   render(){
     return( 
       <div>
         <h1>Hello React</h1>
       </div>
     )
   }
}

export default App

最后成功显示页面

六、安装Redux

npm install redux

redux就相当于vuex，都是状态管理库，这里不做过多赘述。以上内容参考了以下文章React项目规范：目录结构、根目录别名、CSS重置、路由、redux、二次封装axios_react项目目录结构_DantinZhang的博客-CSDN博客

七、编写项目

 （一）在routes文件夹下创建test文件夹，到router.js文件中配置路由

{
  path:`${webUrl}/test`,
  model:()=>[import('/models/sysConfig/organization/testManager/testPermissions.model')]
  component:()=>import('./routes/sysConfig/organization/test')
}

（二）配置好路由之后开始编写页面index.js

import React from 'react'

// 函数式组件
const Test = () => {
  // 页面逻辑
  return (
    // 页面返回的数据
  )
}

// 页面的默认输出，数据渲染到页面
export default Test

（三）创建子组件引入父组件

test文件夹下创建components文件夹，用于放子组件的文件，components文件夹存放不用配置路由的文件，页面结构如父组件一样。

（四）页面用到的库

1.类型检查——PropsTypes

import PropsType from 'prop-types'

 用来指定页面传入参数的类型

2.queryString

import queryString from 'query-string' 

用于处理查询字符串的第三方库 

queryString.parse()——用于将URL查询到的字符串解析为js对象

queryString.stringify()——将js对象解析为URL字符串，与queryString.parse()搭配使用

3.routerRedux

import {rrouterRedux} from 'dva/router' 

用于在dva应用中处理路由跳转的Redux中间件和工具库 

（五）编写页面接口

创建test.service.js文件 

// 编写接口框架
export async function query (params){
  return request ({
     url:'/test',
     method:'get',
     data.params
  })
}

 （六）调用接口

创建test.model.js文件

export default modelExtend(){
  namespace:'test',
  // 存储数据
  state:{},
  // 查询 监听路由
  subscriptions:{}
  // 执行异步操作 但不是纯函数，输入什么输出的就不一定是什么
  effects:{
    // 引入接口
    *query({payload = {}},{call,put,select}){
       const data = yield call(query,payload)
       const {id} = yield select(({testPermissions})=>testPermissions)
       if(data.success){
         yield put({
            type:'',
            payload:{
             
            }
         })
       }else{
         throw data.message
       }
    }
  },
  // 接收旧的state，将新的state一起合并为新的集传出
  reducers:{
  }
}

modelExtend是一个用于简化Dva数据模型定义的函数，这个函数可以从外部传入一个或多个其他的Dva model，并以对象合并的方式将它们整合到当前的模型中。

import modelExtend from 'dva-model-extend' 

 effects中的函数方法

call——调用接口 yield(接口名，参数)

select——获取当前状态state，将testPermissions里的id值赋给表达式左侧

put——effects特有的方法，类似外部调用的dispatch

注意：namespace中的值要与文件名一致！ 

项目大致开发流程就是这样，因为还没有系统性学习react，文章内容有限，欢迎批评指正！