react搭建项目流程 react-router5.0

1 项目搭建 

npm install -g create-react-app

create-react-app react-mobile

cd react-mobile

npm install

从上面的项目目录可以看到，没有webpack配置文件，这是因为这个文件被隐藏了起来，如果想控制webpack配置文件，可以执行npm  eject命令，目录下面就会出现config文件。

注意：npm eject之后，删除node_modules文件 重新npm install  不然会报错

2 项目中引入第三方UI库

看官方文档显示，按需进入需要babel-plugin-import 插件，帮我们加载css和js文件。

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
  ]
}

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

 注意：新的版本中.babelrc设置不生效，需要在webpack中设置，这也是为什么需要让隐藏的config文件显示的原因

在webpack.config.js中加入

            plugins: [
                          [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                  // babel-plugin-import   按需加载antd-mobile中组件 新的版本在.babelrc中配置不生效
                  [
                    "import", 
                    { 
                      "libraryName": "antd-mobile",
                      "style": "css" 
                    }
                  ] // `style: true` 会加载 less 文件
                ],

找到plugins option 加入相应内容就可以了。

3 项目采用rem布局

index.html中加入

 <title>React App</title>
    <script>
      (function (doc, win) {
          var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
              // 设计稿为750px 基数是750  设计稿是375px 基数是375
          };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
  </script>

npm install --save--dev postcss-pxtorem

在webpack.config.js文件的这个位置加入下面代码

         require('postcss-pxtorem')({
              rootValue: 100,
              propWhiteList: [],
              minPixelValue:2,
            })

这样页面中可以根据设计稿给定的大小来开发，会自动转换为rem。

注意：要根据设计稿的大小做相应的调整。

4 使用sass

仔细看webpack.config.js文件会发现，项目中已经带有加载sass文件的插件sass-loader，所以我们要做的就是直接安装编译sass的插件node-sass 

npm install node-sass --save--dev

启动项目，把css文件改为scss文件，看下样式，会发现，编译成功。

5 样式重置

如果你有reset.scss文件，或者reset.css文件，可以直接在index.scss文件中引入，全部生效。如果没有，可以去百度搜一下。

这里上传我的简单配置，仅做参考，reset.scss

body,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
input,
button {
    margin: 0;
    padding: 0;
}

body,
button,
input,
textarea {
    color: #333;
    font: 14px/1.4 'Helvetica Neue', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

input {
    outline: 0 none;
}

img,
input {
    border: none;
}

img {
    max-width: 100%;
    vertical-align: top;
}

ul,
ol {
    list-style: none;
}

i {
    font-style: normal;
}

button,
input[type="button"],
input[type='submit'] {
    cursor: pointer;
}

a {
    color: #222;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #ec584e;
}

a:focus,
button:focus,
input:focus {
    outline: 0
}

//定义各浏览器输入框placeholder的样式（已基本调整一致）
input:input-placeholder,
textarea:input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #e6e6e6;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #999;
}

//清除谷歌自输入框样式
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

// 清除ie输入框叉叉与眼睛
::-ms-clear,
::-ms-reveal {
    display: none;
}

// Correct block display not defined for any HTML5 element in IE 8/9.
// Correct block display not defined for details or summary in IE 10/11 and Firefox.
// Correct block display not defined for main in IE 11.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

// 1. Correct inline-block display not defined in IE 9-.
audio,
canvas,
progress,
video {
    display: inline-block; // 1
}


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
// /居中/ 
.m0a {
    margin-right: auto;
    margin-left: auto;
}
// /换行/ 
.wbb {
    word-break: break-all;
    word-wrap: break-word;
}
// / 单行文字溢出虚点显 示/
 .ell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
// / 加载中背景图片/ 
.loading {
    // background: url("spinner.gif") no-repeat center;
}
// /字间隔/
 .ls3 {
    letter-spacing: 3px;
}
// /黑色透明背景/ 
.bgop {
    opacity: .5;
    background: #000;
    -moz-opacity: .50;
    filter: alpha(opacity=50)
}

.zi1 {
    z-index: 1;
}
// /wrap/ 
.w1180 {
    max-width: 1180px;
    margin: 0 auto;
}

// triangle 三角箭头
// 可采用空元素或伪元素生成，具体定位这里不涉及
%triangle-basic {
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    line-height: 0;
    overflow: hidden;
}

@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: #ccc) {
    @extend %triangle-basic;

    @if $direction==top {
        border-top: $borderWidth solid $borderColor;
        border-left: $borderWidth dashed transparent;
        border-right: $borderWidth dashed transparent;
    }

    @else if $direction==right {
        border-right: $borderWidth solid $borderColor;
        border-top: $borderWidth dashed transparent;
        border-bottom: $borderWidth dashed transparent;
    }

    @else if $direction==bottom {
        border-bottom: $borderWidth solid $borderColor;
        border-left: $borderWidth dashed transparent;
        border-right: $borderWidth dashed transparent;
    }

    @else if $direction==left {
        border-left: $borderWidth solid $borderColor;
        border-top: $borderWidth dashed transparent;
        border-bottom: $borderWidth dashed transparent;
    }
}

//设置按钮
@mixin btn($fontSize: 16px, $color: #fff, $bgColor: #ec5845) {
    position: relative;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: $fontSize;
    text-align: center;
    line-height: 2.33333333;
    border-radius: 5px;
    overflow: hidden;
    color: $color;
    background: #ec5845;

}

//单行隐藏
@mixin ell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

// transition
@mixin tran {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

@mixin flex {
    display: -webkit-box; //旧语法
    display: -webkit-flex; //新语法
    display: flex;
    flex-direction: row;
}

@mixin bg {
    background: rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#30000000', endColorstr='#30000000')\9;
}

6 请求函数的封装

/*
 * @Author: 麦乐
 * @Date: 2019-05-30 
 */
import axios from 'axios';

console.log(process.env.NODE_ENV)
// development 环境 默认是本地url
if(process.env.NODE_ENV === "production") {
    axios.defaults.baseURL = 'https://api.huazhukuaixin.com/';
} 
axios.defaults.timeout = 30 * 1000;
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// 添加请求拦截器
axios.interceptors.request.use((config) => {
   
    // 在发送请求之前做些什么
    return config;
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((response) => {
    // console.log( window.sessionStorage._csrf_token_,"axios")

    // 对响应数据做点什么
    return response;
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
});


class Check {
     _checkStatus(response) {
        // 如果http状态码正常，则直接返回数据
        if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
            return response.data;
        }
        // 异常状态下，把错误信息返回去
        return {
            status: response.status,
            msg: '请求异常'
        };
    }
    _checkCode(error) {
        // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
        if (error.status === -404) {
            alert(error.msg);
        }
        if (error.data && (!error.data.success)) {
            alert(error.data.error_msg);
        }
        return error;
    }

}
class Axios {
    _Check;
    constructor() {
        this._Check = new Check();
    }
    get(url, params = null) {
        return axios({
            url,
            params,
        }).then(
            (response) => {
                console.log(url, response)
                return this._Check._checkStatus(response);
            }
        ).catch(
            (error) => {
                console.log(url, error)
                return this._Check._checkCode(error);
            }
        );
    }
    post(url, data = null) {
        return axios({
            method: 'post',
            url,
            data,
        }).then(
            (response) => {
                console.log(url, response)
                return this._Check._checkStatus(response);
            },
        ).catch(
            (error) => {
                console.log(url, error)
                return this._Check._checkCode(error);
            },
        );
    }
}

export default new Axios();

7 代理设置

在package.json中 加入下面属性，注意后面是字符串，可以设置多个代理，大家可以去尝试一个。

"proxy": "https://www.pinkumall.com",

Home>index.js

import React from 'react';
import logo from '../../logo.svg';
import './index.scss';
import Footer from "../../publicComponents/Footer"
import Axios from "../../utils/request";

class Home extends React.Component {
  componentDidMount () {
    Axios.get('/h5/misc/config').then((response) => {
      console.log(response);
    }).catch((err) => {
      console.log(err)
    })
  }
  render() {
    return (
      <div className="Home">
        <header className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="Home-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <Footer />
      </div>
    );
  }
}

export default Home;

请求发送成功。

8 路由 

在下一篇中，可以点击下面链接查看

https://blog.csdn.net/qq_41831345/article/details/90896562