使用react进行项目开发

一、项目初始化

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"},

使用react进行项目开发相关推荐

react问答项目开发
课程地址:http://zexeo.com/course/56753a22b2b8de861c0d281a 写博客中碰到的好的资源站 gulp详细入门教程当 React 遇见 Gulp 和 Brow ...
React + TS项目开发小技巧总结
一.react hook知识 1.基本使用最常用的Hook,有两个:useState.useEffect import React, { useState } from "react&qu ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
React项目开发中的数据管理
原文链接:https://blog.csdn.net/hl582567508/article/details/76982756 redux中文文档:http://cn.redux.js.org/ Re ...
基于React和fabricjs开发的在线名片、海报设计器，大前端项目在线图片编辑器源码分享
基于React和fabricjs开发的在线名片.海报设计器,大前端项目在线图片编辑器大家好我是伟伟权现在我给大家介绍一个我的前端项目这是一个名片设计器它是使用react加fabric js进行 ...
微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架
Taro的编写代码方式和mpvue.WePY框架最大的一个差别就是,Taro并不是基于Vue.js的语法规范,而是遵循React语法规范,它采用与React一致的组件化思想,组件生命周期与React保 ...
基于React全家桶开发「网易云音乐PC」项目实战(一)
网易云音乐PC项目实战项目简介 1.项目介绍项目使用到的技术栈 CSS使用Flex进行布局配置路径别名使用: carco 项目路由使用: react-router来管理使用react-rout ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...

使用react进行项目开发

使用react进行项目开发相关推荐

最新文章

热门文章