使用react进行项目开发_react开发-优快云博客

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/125060933

本文详细介绍了如何从零开始初始化一个React项目，包括使用create-react-app创建基础结构，集成Redux进行状态管理，引入Bootstrap美化UI，配置Redux-thunk处理异步操作，并使用redux-devtools-extension进行调试。同时，还涵盖了设置路径别名、添加axios库和配置路由的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目初始化

1、创建项目

npx create-react-app react-basic

2、清理项目目录，根据模板搭建基本页面结构

3、安装sass包 yarn add sass

4、安装bootstrap包 yarn add bootstrap@4.5.0 ,导入bootstrap样式文件

5、配置Redux基本配置 yarn add redux@3

6、如果碰到项目报错或不兼容可能需要降版本

yarn add react@17.0.2 react-dom@17.0.2 --save

7、配置react-redux，连接react和redux

yarn add react-redux

8、渲染任务列表

yarn add classnames

9、安装axios

yarn add axios

10、中间件

1、yarn add redux-thunk

2、导入redux-thunk

3、将thunk添加到applyMiddleware函数的参数中

4、yarn add redux-devtools-extension

5、从该中间件中导入composeWithDevTools函数

6、调试该函数，将applyMiddleware作为参数传入

import channelsReducer from './reducers/channels'
import { createStore,combineReducers, applyMiddleware} from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

const reducer=combineReducers({channelsReducer})

const store=createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
export default store

11、配置路由

yarn add react-router-dom@5.3.0

12、Ant Design组件库

yarn add antd

13、配置路径别名craco，可以用@书写路径

yarn add -D @craco/craco

创建craco.config.js

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

修改package.json配置

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