From 56e1984df3048d9deb55aba2c973dbca1785ef39 Mon Sep 17 00:00:00 2001
From: linguofeng <linguofeng@msn.com>
Date: Mon, 5 Dec 2016 00:21:23 +0800
Subject: [PATCH] update

---
 _includes/head.html                         |  4 +-
 _posts/2016/2016-12-04-react-stack.markdown | 68 +++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 _posts/2016/2016-12-04-react-stack.markdown

diff --git a/_includes/head.html b/_includes/head.html
index 7089365..e2b7e29 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -28,11 +28,11 @@
   <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
 
   <meta name="google-site-verification" content="mI0pbdIvMWuVMULdngJ475un6RZmA_2jFCvVU-Ws7-U" />
-  <script type="text/javascript">
+  <!-- <script type="text/javascript">
     (function() {
       var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
       po.src = "https://apis.google.com/js/plusone.js?publisherid=104102834391130673606";
       var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();
-  </script>
+  </script> -->
 </head>
diff --git a/_posts/2016/2016-12-04-react-stack.markdown b/_posts/2016/2016-12-04-react-stack.markdown
new file mode 100644
index 0000000..6b5a2dc
--- /dev/null
+++ b/_posts/2016/2016-12-04-react-stack.markdown
@@ -0,0 +1,68 @@
+---
+layout: "post"
+title: "React开发栈"
+date: "2016-12-04 23:38"
+---
+
+时隔半年多没发表新博客了，最近一直在“前端”开发，主要是以JavaScript语言为主开发语言的前端开发，移动端使用Framework7 + React + Cordova实现iOS与Android的开发；最近移动端新版使用React Native“重构”，为啥是重构，得益于一开始选择使用React+Framework7开发，整个项目70%代码是可以直接在React Native上使用的。
+
+下面就总结这半年多使用React用到的一些东西：
+
+- `yarn` 如果现在还在使用npm就有点"out"了，Facebook开发的node package管理工具。
+
+```bash
+$ 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语言标准来开发，体验新标准带来的语法糖与便利。
+
+```javascript
+export default class Api {
+  // 使用箭头函数
+  fetchList = () => this.api.get('posts');
+}
+
+// 使用import代替require
+import Api from './api';
+```
+
+- `webpack` 项目打包工具，可以结合babel实现ES6/7转码成ES5，还能实现代码热更新，SASS/LESS样式处理，图片资源处理等。
+
+4. `eslint` 代码风格管理，统一团队代码风格很重要，使用eslint-config-airbnb。
+
+5. `react` 当前最流行的WEB前端开发框架，由Facebook开源。
+
+```javascript
+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。
+
+```javascript
+this.props.dispatch(fetchList());
+```
+
+- `redux-saga` 结合redux使用，通过监听Action处理任务，能够实现流程化，是一个很强大的库。
+
+- `axios` http请求库。
+
+- `react-virtualized` 解决列表太长的库，能够把列表项控制在一个数，提高效率。
-- 
2.11.4.GIT