长时间不用React,希望自己不要忘记了使用React的日子

 

1、创建脚手架: create-react-app 项目名

 

2、删除无用文件

react设置ios安全距离_css样式

 

 

 3、src目录下搭配文件

react设置ios安全距离_App_02

 

 

 4、项目需要安装的技术站

react设置ios安全距离_App_03

 

 

 yarn add react-router-dom prop-types redux redux-thunk react-redux react-loadable immutable redux-immutable whatwg-fetch styled-components antd-mobile http-proxy-middleware swiper better-scroll customize-cra react-app-rewired --dev react-app-rewired customize-cra babel-plugin-import --dev

5、配置Ant插件

移动端: https://mobile.ant.design/index-cn

PC端:https://ant.design/index-cn

使用PC端时需要引入样式: import 'antd/dist/antd.css'

react设置ios安全距离_css样式_04

 

 

 6、在根目录下创建一个config-overrides.js文件并配置

react设置ios安全距离_react设置ios安全距离_05

 

 

 7、创建组件

react设置ios安全距离_封装_06

 

 

 8、引入tabBar

react设置ios安全距离_css样式_07

 

 

 9、创建tabbar.js在App中引入

react设置ios安全距离_react设置ios安全距离_08

 

 

 10、tabBar中的配置

react设置ios安全距离_封装_09

 

 

 

react设置ios安全距离_react设置ios安全距离_10

 

 

 11、引入图片的操作

react设置ios安全距离_css样式_11

 

 

 12、引入公共样式

在src目录下创建一个js文件使用style.components

设置好后并导出去在入口文件index.js中使用也就是根组件操作App

并使用包裹这样全局的css样式就进来

安装:npm install --save style-components

react设置ios安全距离_react设置ios安全距离_12

 

 

 必须要有一个根元素所以使用react内置组件包裹不会当做标签使用 这时css样式就进来了

但是不能使用Fragment应该使用react-redux 一旦用了react-redux就会有store还会有reducer

react设置ios安全距离_封装_13

 

 

 13、 开始配置路由

引入路由:react-router-dom

引入Switch: 渲染组件的时候只会渲染一个组件一般会配合exact进行使用

exact绝对路径

引入route:路由要被Router包裹

引入重定向:Redirect

引入所有组件

react设置ios安全距离_App_14

 

 

路由配置完成后有一个bug无论点击哪个都是默认的绝对地址使用高阶组件withRouter解决这个高阶组件是路由中的

被withRouter包裹的组件会有三个参数:history,location,match可以通过history跳转更换地址在tabbar组件中使用

14、使用withRouter解决更换地址问题

引入:import {withRouter} from 'react-router-dom';

使用:

react设置ios安全距离_css样式_15

 

 

 15、封装fetch:( 两种封装哪一种都可以 )

注意fetch要改名通过as因为浏览器中也有一个fetch

第一种引用qs

react设置ios安全距离_react设置ios安全距离_16

 


 第二种直接封装

react设置ios安全距离_App_17