React移动端项目基础搭建流程（一）

1、框架安装

npx create-react-app ./

安装结束，yarn start 测试项目是否能正常运行

2 分析项目 --重要

1、 哪些公共组件需要封装处理

2、要用到哪些技术，处理css用什么（styled-components，css，scss等）ui库用什么（ant-design等）

3、移动端适配问题处理 rem 还是postcss-px-to-viewport等方法

4、项目的整体搭建风格，将一个功能剥离成多个子组件，方便后期维护

3 首页–基础搭建

1 基础的页面布局可以引用ant-design中的一些组件

注意下载 antd-mobile npm i antd-mobile
并且引入css样式

import 'antd-mobile/dist/antd-mobile.css';

2 设置别名
主要解决路径太长的问题

需要下载一个插件

npm install react-app-rewired customize-cra --save-dev

并且在根目录创建一个文件： coinfit-overrides.js(命名唯一)
具体的一些配置可以参考： webpack配置重置参考文档

3 样式的设置，用到了styled-components
需要提前下载、

npm i styled-components -S

4 这一阶段设置好移动端的适配

主要根据动态的修改html的font-size属性，配合rem使用相对大小，鉴于这个东西比较重要，贴出代码：

 (function (w) {
      var doc = w.document;
      var docEl = doc.documentElement;
      var timer;

      function refresh() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) {
          width = 750;
        }
        var rem = width / 7.5;
        docEl.style.fontSize = rem + "px";
      }
      w.addEventListener('resize', function () {
        timer && clearTimeout(timer);
        timer = setTimeout(refresh, 400);
      })

      w.addEventListener('pageshow', function () {
        timer && clearTimeout(timer);
        timer = setTimeout(refresh, 400)
      })
    })(window)

5 轮播图，这里采用了ant-design中的走马灯组件

走马灯地址

import { Carousel } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

这个时候需要配置json-server模拟数据了，因为轮播图需要图片嘛
这里新建一个utils文件夹用来写数据请求的接口
新建mock用来存放json模拟数据

6 配置代理-—重要
这里我们json-server模拟的数据接口是5100，而我们本地是3000，明显存在跨域的情况
那就来个代理呗
可以参考下面这个文档的配置：

配置参考文档地址

步骤：原文

1 Next, create src/setupProxy.js and place the following contents in it:

2  You can now register proxies as you wish! Here's an example using the above http-proxy-middleware:

3 在setupProxy.js文件中进行相关配置即可

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5100',
      changeOrigin: true,
    })
  );
};

7 做搜索框，考虑到后期的复用，因此封装成一个公共的组件

8 上一步封装过程中涉及到1px边框问题，由于设备像素比(dpr)的问题，要处理下这个问题
由于是边框，这里用到了高阶组件，即传入一个组件返回一个新的组件，在这个过程中对原组件进行了处理，解决1px问题

9 为了更好的控制列的显示效果，对列进行了动态的控制，动态传入，实现任意列效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427020829217.png

10 配置路由
简单说就是为了实现不同页面的跳转
首先下载 react-router-dom
接下来进行一些配置–可以参考下面的文档
路由相关配置参考文档

11 按钮的一个动画效果 —利用了伪类的相关知识核心代码

&::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 1.4rem;
            height: 0.56rem;
            background: white;
            border-radius: 0.3rem;
            transition:all 0.3s;
          }
      
          &.left::before {
            transform: translate(0, 0);
          }
      
          &.right::before {
            transform: translate(100%, 0);
          }

至此首页的基础部分完毕，后续继续更新
下一篇博客会介绍如何通过context实现数据共享、如何引入百度地图