如何用react+react-router+fetch+webpack2简单集成一个移动端项目

前言:根据公司业务的要求,我最近用react写了一个项目,已经上线,把道路中遇到的一些坑和一些项目中的经验分享和大家共勉。
***这是目录结构***

这里写图片描述
当然结构是根据自己项目的复杂程度来定义的,但是大体上都是这样。


1.技术选型

为什么我要选择react,首先我看重的是他的单向数据流,他是和js单线程保持一致的,然后是因为毕竟是facebook团队来维护,准确性和可信度就不用说了。最后从2013年react发布到现在也四年了,坑踩得差不多了。


2.项目的前期准备

先搞个react+react-router+webpack能跑起来的demo,helloworld也可以,具体可以参照官网或http://www.ruanyifeng.com/blog/2015/03/react.html,http://www.ruanyifeng.com/blog/2016/05/react_router.html   

http://www.jianshu.com/p/4df92c335617
UI建议用ant-design-mobile,官网讲的很细
https://mobile.ant.design/docs/react/introduce


3.项目的实战

根据页面和页面的逻辑建好符合自己的文件夹,开始画页面了,这里边有几点注意的也是我做的时候遇到的问题:

(1)css在react中的写法

,网上有很多的例子比如css in js ,CSS Modules,我觉得都不够灵活,和之前我们的写法差别太大,我是采用直接引入css的方式来做的


import React from 'react';
import '../../css/ious.less';
export default class IousAgreement extends React.Component {
    render() {
        var a = ['a','b','c']
        return (
            <div>
                {a.map((item,index) => {
                    return <p key={index} className="txt">this is{item}</p>
                })}
                这是协议页面
            </div>
        );
    };
    componentDidMount(){
        document.title = '协议'
    }
}

less里边还是按照咱们以前的方式写,很爽,当然这离不开神器webpack

{ test: /\.less$/, exclude: /node_modules/, loader: 'style-loader!css-loader!postcss-loader!less-loader' },

网上很多webpack的配置,webpack2的官网也很详细,建议大家看下

(2)fetch低端机不能发出请求

ios低端机和红米手机有问题,主要是profill的问题,所以在请求里需加上。

require('es6-promise').polyfill();
require('isomorphic-fetch');

然后在使用fetch

(3)后端返回maplist对象

前端处理习惯数组了,后端有时候会给你返回list对象,那么前端就需要通过先获取object中的key然后遍历key来获取value.

    let list = Object.keys(tf).sort().reverse().map((name, indexs) => {
      return <div key={indexs}>
        <div class="popup-title">{name}</div>
        <ul>
          {group_bills[name].map((item, index) => {
            return <li key={index} onClick={this.reloadPage.bind(this, item.billId, item.billMonth)}>
              <p>
                <i>{item.serNo.slice(-2)}月账单</i>
              </p>
              <span class="iconfont icon-icon-angle-right"></span>
            </li>
          })}
        </ul>
      </div>
    })

(4)心中时刻想着状态驱动数据变化

不要总想着通过dom 获取,尽量使用state来驱动视图的变化,例如:

{
    this.state.amount
    ?
    <div class="detail-tip">有退款{this.state.amount}元,已退回</div>
    :
    ''
}

(6)react-router2.X ios机子上页面一直处于加载中

router后边的参数导致?k_123之类的,去掉就好了

import { Router, useRouterHistory ,Route, IndexRoute} from 'react-router'
import { createHashHistory } from 'history'
// useRouterHistory creates a composable higher-order function
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

(6)自己封装的js引入

webpack中配置
const CopyWebpackPlugin = require('copy-webpack-plugin');//处理自己封装的js
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'src/js/encrypt'),
        to: 'static/encrypt',
        ignore: ['.svn']
      },
      {
        from: path.resolve(__dirname, 'src/js/utils'),
        to: 'static/utils',
        ignore: ['.svn']
      }
    ])

jsx中引入图片,要使用require

<img src={require('../../images/noious.jpg')}

东西还有很多,我这里主要和大家分享这六点,欢迎大家拍砖


4项目的总结
其实还有很多的细节,但是其他的解决起来谷歌很快能找到,我就不一一赘述了。整个项目逻辑还算可以所以没有引入react-redux,后期我会加入再和大家分享。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页