React开发栈

时隔半年多没发表新博客了,最近一直在“前端”开发,主要是以JavaScript语言为主开发语言的前端开发,移动端使用Framework7 + React + Cordova实现iOS与Android的开发;最近移动端新版使用React Native“重构”,为啥是重构,得益于一开始选择使用React+Framework7开发,整个项目70%代码是可以直接在React Native上使用的。

下面就总结这半年多使用React用到的一些东西:

  • yarn 如果现在还在使用npm就有点"out"了,Facebook开发的node package管理工具。
$ yarn init # 代替npm init初始化项目
$ yarn add react # 代替npm install --save添加依赖
$ yarn add --dev babel-cli # 代替npm install --save-dev添加开发依赖
$ yarn # 代替npm install
  • babel 如果现在还在使用ES5语法开发就有点"out"了,能够把ES6、ES7转成ES5的工具;使用最新的JavaScript语言标准来开发,体验新标准带来的语法糖与便利。
export default class Api {
  // 使用箭头函数
  fetchList = () => this.api.get('posts');
}

// 使用import代替require
import Api from './api';
  • webpack 项目打包工具,可以结合babel实现ES6/7转码成ES5,还能实现代码热更新,SASS/LESS样式处理,图片资源处理等。
  1. eslint 代码风格管理,统一团队代码风格很重要,使用eslint-config-airbnb。

  2. react 当前最流行的WEB前端开发框架,由Facebook开源。

function TodoItem({ itemData }) {
  return (
    <div>
      <p>{itemData.title}</p>
    </div>
  );
}

export default class TodoList extends Component {
  render() {
    return (
      <div>
        {this.props.todos.map(item => <TodoItem itemData={item} />)}
      </div>
    );
  }
}
  • redux 结合react使用,通过Action改变Store,再由Store更新Component。
this.props.dispatch(fetchList());
  • redux-saga 结合redux使用,通过监听Action处理任务,能够实现流程化,是一个很强大的库。

  • axios http请求库。

  • react-virtualized 解决列表太长的库,能够把列表项控制在一个数,提高效率。