_posts/2016/2016-12-04-react-stack.markdown

   1 ---
   2 layout: "post"
   3 title: "React开发栈"
   4 date: "2016-12-04 23:38"
   5 ---
   6
   7 时隔半年多没发表新博客了，最近一直在“前端”开发，主要是以JavaScript语言为主开发语言的前端开发，移动端使用Framework7 + React + Cordova实现iOS与Android的开发；最近移动端新版使用React Native“重构”，为啥是重构，得益于一开始选择使用React+Framework7开发，整个项目70%代码是可以直接在React Native上使用的。
   8
   9 下面就总结这半年多使用React用到的一些东西：
  10
  11 - `yarn` 如果现在还在使用npm就有点"out"了，Facebook开发的node package管理工具。
  12
  13 ```bash
  14 $ yarn init # 代替npm init初始化项目
  15 $ yarn add react # 代替npm install --save添加依赖
  16 $ yarn add --dev babel-cli # 代替npm install --save-dev添加开发依赖
  17 $ yarn # 代替npm install
  18 ```
  19
  20 - `babel` 如果现在还在使用ES5语法开发就有点"out"了，能够把ES6、ES7转成ES5的工具；使用最新的JavaScript语言标准来开发，体验新标准带来的语法糖与便利。
  21
  22 ```javascript
  23 export default class Api {
  24   // 使用箭头函数
  25   fetchList = () => this.api.get('posts');
  26 }
  27
  28 // 使用import代替require
  29 import Api from './api';
  30 ```
  31
  32 - `webpack` 项目打包工具，可以结合babel实现ES6/7转码成ES5，还能实现代码热更新，SASS/LESS样式处理，图片资源处理等。
  33
  34 4. `eslint` 代码风格管理，统一团队代码风格很重要，使用eslint-config-airbnb。
  35
  36 5. `react` 当前最流行的WEB前端开发框架，由Facebook开源。
  37
  38 ```javascript
  39 function TodoItem({ itemData }) {
  40   return (
  41     <div>
  42       <p>{itemData.title}</p>
  43     </div>
  44   );
  45 }
  46
  47 export default class TodoList extends Component {
  48   render() {
  49     return (
  50       <div>
  51         {this.props.todos.map(item => <TodoItem itemData={item} />)}
  52       </div>
  53     );
  54   }
  55 }
  56 ```
  57
  58 - `redux` 结合react使用，通过Action改变Store，再由Store更新Component。
  59
  60 ```javascript
  61 this.props.dispatch(fetchList());
  62 ```
  63
  64 - `redux-saga` 结合redux使用，通过监听Action处理任务，能够实现流程化，是一个很强大的库。
  65
  66 - `axios` http请求库。
  67
  68 - `react-virtualized` 解决列表太长的库，能够把列表项控制在一个数，提高效率。