react技術棧

關於 Redux 中間件

Redux 的中間件是定義一個函數，對 dispatch 進行改造，在發出 action 與執行 reducer 之間添加其餘功能，這是對 Redux 進行功能拓展的方式。那麼這個中間件的實現原理是什麼呢？如何寫一個 Redux 的中間件呢？

從 react-start 到 co 源碼 (一)

這是一個系列文章。主要分爲三篇，講述了 react 開發環境的簡單搭建，腳手架的開發以及 co 源碼的分析。對讀者瞭解 react 和 generator 有必定的幫助。這是第一篇簡單的講述了 react 開發環境的搭建。

React 全家桶實現一個簡易備忘錄

前言 總括： 本文采用 react+redux+react-router+less+es6+webpack, 以實現一個簡易備忘錄 (todolist) 爲例儘量全面的講述使用 react 全家桶實現一個完整應用的過程。 代碼地址：React 全家桶實現一個簡易備忘錄 原文博客地址：Rea…

redux 在 react 中的應用（基礎篇）

依靠單槍匹馬的 react 來構建應用的狀況下，組件之間的通信一直是個難題，藉助於 redux，這個問題將迎刃而解，同時，redux 也使得構建一個複雜大型的應用成爲可能，redux 是可選方案，可是做爲學習對象，你千萬不要錯過！

12 步 30 分鐘，完成用戶管理的 CURD 應用 (react+dva+antd)

本文會一步步引導你們如何建立一個完整的 CURD 應用，包括列表、刪除、編輯、建立，以及 loading 狀態的自動處理等，基於 react, dva 和 antd 。

在 redux 上探索無需刷新前端頁面的後端開發體驗

後端應用爲前端應用提供了狀態（state）。藉助 redux，咱們能夠在服務器重啓後從新拉去數據，替換 action，構建相同條件下的新狀態，從而不須要刷新頁面來重啓前端應用。這對於以重啓很是迅速的腳本語言做爲後端語言的應用，而且是同時進行先後端開發的場景來講，能夠提供更好的開發體驗。

簡單幾步助你優化 React 應用包體

本文從屬於筆者的 Web 前端入門與最佳實踐 中的 React 入門與最佳實踐系列。本文首發於簡單幾步助你優化 React 應用包體 - 某熊的全棧之路 - SegmentFault，考慮到專欄知識體系的完善轉發到了這裏。

React 起手式: 來寫個 TodoList 吧

一個簡單 TodoList 的教程，讓初學者可以快速上手而且對 React 有個大概的瞭解 :D

正確掌握 React 生命週期 (Lifecycle)

1 React 用了這麼久，常常遇到的問題是 setState 在這裏寫合適嗎？
2 爲何 setState 寫在這裏形成了重複渲染屢次？
3 爲何你的 setState 用的這麼亂?
4 組件傳入 props 是更新呢？從新掛載呢？仍是怎樣？

[[英] Netflix：使用 React 構建高性能的 TV 用戶界面](https://juejin.im/entry/587ef...

Netflix 在 2015 年就選擇 React 做爲前端架構，這篇文章總結了 Netflix 在解決性能問題的經驗。

[[譯文] React： 一步一步搭建大型應用](https://juejin.im/entry/58785...

翻譯自 https://www.fullstackreact.co...
講述了，從安裝開發環境測試環境，到搭建應用，一步一步如何搭建答應完整的 react 應用的。

主要一下幾方面：

1. 環境配置
2. 項目結構設計
3. react 測試書寫
4. 路由和組件的設計

涉及到的知識：

React，Postcss， Webpack， css modules， react-router， karma， mocha， enzyme， flexbox

基於 vue+vuex+localStorage 開發的本地記事本

本文采用 vue+vuex+localStorage+sass+webpack，實現一個本地存儲的記事本。兼容 PC 端和移動端。

翻譯 | 如何規模化 React 應用

譯者： 朱乙（滬江前端開發工程師）

咱們最近發佈了 React Boilerplate 3.0，在發佈前幾個月，咱們與數百位開發者進行了溝通，討論了他們是如何構建和規模化 WEB 應用的。下面將咱們從中學到的東西分享給你們。

React 實戰：模仿賣座電影

一個使用 react、react-router、redux 高仿賣座電影網的項目

[[譯] 在 setState 中使用函數替代對象](https://juejin.im/entry/5873b...

React 中 setState 的新用法！

一個 react+redux 工程實例

這篇文章主要實現一個簡單的例子，難度不大，可是貫穿了 react+redux 基本思想。
他將會是一個連續教程，這只是第一篇，不涉及 redux 中間件，redux 處理異步等內容，也不涉及 react 性能優化，不可變數據 immutable.js 的內容。但這些不涉及到的內容，都會隨着這個 demo 的複雜度一步一步提高，在後續章節有分析和使用。

React 的四個概念簡單介紹

React 的四個概念簡單介紹：Virtual DOM；React 組件；Jsx 語法；Data Flow（單向數據流）

CSS Modules 詳解及 React 中實踐 - pure render - 知乎專欄

CSS Modules 詳解及 React 中實踐

深刻理解 React 高階組件

高階組件是一種很好的模式，不少 React 庫已經證實了其價值。這篇文章中咱們將會詳細的講解什麼是 HOC，你能用它作什麼，它有哪些侷限，如何實現它。

React 中 setState 同步更新策略

咱們在上文中說起，爲了提升性能 React 將 setState 設置爲批次更新，便是異步操做函數，並不能以順序控制流的方式設置某些事件，咱們也不能依賴於 this.state 來計算將來狀態。典型的譬如咱們但願在從服務端抓取數據而且渲染到界面以後，再隱藏加載進度條或者外部加載提示：

React 實現的 2048 小遊戲 (新手入門~)

基於 React 和 Webpack 開發的一個 2048 小遊戲，相對於枯燥的 TodoList，這個可能更有趣一點。

React.js: web 開發者的 14 個工具和資源

自從 Facebook 在 2013 年發佈了庫以後，React.js 正在快速被廣大開發者所接受。它如今已經成爲了 GitHub 上被收藏次數排名第 5 的開源項目，愈來愈多的企業正在尋找 React.js 開發者。本文爲廣大開發者介紹了 14 個工具和資源，助力 web 開發。

多是註釋寫的最詳細的 React 腳手架 ─ 支持多入口及支持複雜業務分離

一個完善的 Koa+Webpack+React 集成開發環境, 實現了多頁面應用入口

框架優勢

· 支持多頁面類型的 React 應用開發
· 實用 Koa 服務器進行構建, 擴展性更強
· 分爲開發環境 (Dev) 和上線 (Prod) 環境, 能夠自由選擇並進行開發
· 支持 React 熱加載, 能夠實現 CSS 及 JS 的熱加載效果
· 附加 Postcss 工具, 可實現 Sass 語法開發, 自動填充 CSS3 兼容方案及 CSS 雪碧圖的自動化構建
· 使用了 CSS-Module 技術, 實現了樣式的複用性和解決了樣式污染

基於 React 的 fetch 請求測試工具 -- fetch-request

基於 dva antd 和 React 能夠選擇多種請求類型, 用於在開發中測試接口

在 React.js 中使用 PureComponent 的重要性和使用方式

若是你用 React，請學會使用 PureComponent

前端學習指南 - 廣度 + 深度的探索

一篇由淺入深、逐步遞進的學習指南，遵循曲線，將帶你涉足前端開發過程當中方方面面。若想在前端領域有更深的思考，也提供了相應的進階篇，介紹技術背後的原理闡述、架構思考、編程方法論等。

用 React+Redux 寫一個 RubyChina 山寨版 (二)

React+redux+react-router-redux+antd+es6+redux-thunk 的 RubyChina 山寨版，適合初學 ReactJs，一邊寫代碼一邊寫文檔，記錄成長的痕跡

一個簡單的甘特圖 React 組件封裝 gantt-for-react

甘特圖通常用來作任務、項目管理。直觀的看出任務的時間安排以及依賴關係。

[[譯] Netflix: 使用 React 構建高性能的電視用戶界面](https://juejin.im/entry/589a9...

這篇文章總結了 Netflix 在使用 React 框架搭建其 UI 框架的過程當中，性能優化方面的一些經驗。

一張圖學習 ES6 中的 React 生命週期與流程

爲了理解 React 在學習生命週期的過程當中想要一個生命週期的圖，網上有一些流程，可是看着不夠全，就嘗試着畫了一個，第一次弄，歡迎提意見

React 最少必要知識

去年 8 月左右，看到了 ThoughtWorks 發佈的 2016 年技術雷達，裏面重點推薦了 react.js 技術，加上前端技術棧三足鼎立中，react 也佔據一席，其餘兩個分別是 vue.js 及 angular.js，而 react 和其餘兩個的區別在於，它顛覆了整個技術棧，自成一派，拋棄了 HTML 和 DOM，引入了 JSX 語法，讓程序員能夠更專一於邏輯代碼。這一切讓我對 react.js 充滿了好奇，決定花時間學習一下，一探究竟。

簡談 react + redux 架構的特色和挑戰

本文分別從 react 和 redux 各自的特色出發，分析了架構中兩者的特色和問題所在。

JS 全棧教程

本課程是基於阮一峯的 js 全棧教程的視頻版本，免費供你們觀看

React 開發流程——利用 React 構建簡單的可檢索產品數據表

React 開發流程——利用 React 構建簡單的可檢索產品數據表

基於 Webpack 2 的 React Router 懶加載路由配置

基於 Webpack 2 的 React Router 懶加載路由配置承接基於 Webpack 2 的 React 組件懶加載，主要是對上一篇文章中的部分論述進行補充和修正，從屬於 Web 前端入門與工程實踐。

UXCore 組件單測的一些事兒

UXCore 是 XUX 團隊開源的 PC 端 React UI 套件，做爲一個支持企業級應用的 React UI 開源套件，爲了保持項目的持續集成，良好的單元測試必不可少。本文來分享一下在編寫單元測試的過程當中遇到的一些問題和總結。

React-Manga 一個以 React 實現的漫畫 WebApp

使用 React 實現的 WebApp 版開源漫畫閱讀器。目前已實現用戶登陸註冊、提供漫畫推薦、漫畫搜索、漫畫收藏、漫畫閱讀、歷史記錄 等功能。

React Toolbox - 符合 Material Design 規範的 React 組件

符合 Material Design 規範的 React 組件

淺析 React 之事件系統（二）

文章介紹了 React 的事件系統，比較了與原始事件的區別和如何合理使用 React 合成事件與原生時間

打造 redux 同構應用

handcrafting-an-isomorphic-redux-application-with-love

React 服務端渲染緩慢緣由淺析

緣何 React 服務端渲染的性能會如此之差；從設計理念的角度來看 React 自己專一於跨平臺的界面庫，其保證較好抽象層次的同時勢必會付出必定的代價，而且 Facebook 在生產環境中並未大規模應用服務端渲染，也就未花費過多的精力來優化服務端渲染的性能。筆者也對比了下 React 與 Preact 有關服務端渲染的實現代碼，確實高度的抽象須要額外的代碼邏輯與對象建立，React 自己並無冗餘的部分，只是單純地大量的毫秒級別額外對象操做的耗時的累加致使了最後性能表現的巨大差別。咱們首先看下 Preact 的 renderToString 的函數實現，其緊耦合於 DOM 環境，以較低的抽象程度換取較少的代碼實現：

基於 reactjs+redux+postcss+webpack2 的單頁應用項目模板

基於 reactjs+redux+postcss+webpack2 的單頁應用項目模板，webpack 已升級到 2.2.1。

使用 mobx 開發高性能 react 應用

react 做爲模塊化的 UI 層框架，在前端領域正處於如日中天的地位。但若是僅僅使用 react，每每須要在 UI 層中承載過多的業務邏輯，引入模塊化的同時卻破壞了分層。爲此業界有不少解決方案，目前最流行的就是 redux，其適用於大型項目。而本文將詳細介紹一種更靈活的、適合於中小型應用的數據層框架 mobx。

React 經常使用面試題目與分析 - 某熊的全棧之路

React 經常使用面試題目與分析從屬於筆者的 Web 前端入門與工程實踐，更多前端思考借鑑 2016 - 個人前端之路: 工具化與工程化

React Table - 適用於 React 的輕量級、可擴展的數據表格

亮點：輕量，壓縮後 7kb；徹底定製的 JSX 模板；支持客戶端和服務器端的分頁和多重排序；設計簡潔，方便主題化；經過 props 和 callback 來高度定製。

React 爬坑記

趁年假研究了下 react，寫了點坑

通用 React 兼容渲染引擎：Rax

Rax 是阿里開源的一個通用的 JavaScript 庫。它具有快速、輕量級的，並可跨瀏覽器、Weex 和 Node.js 的特色。同時，它有 React 兼容的 API ，便於瞭解 React 的朋友們快速上手。喜歡的朋友能夠了解下。

用 React+Redux 寫一個 RubyChina 山寨版 (一)

React+Redux+react-router-redux+antd+babell+es6 的 RubyChina 山寨版，適合初學 ReactJS，一邊寫代碼一邊寫文檔，記錄成長的痕跡

React-Redux-Appointment

React-Redux 小應用：React-Redux-Appointment

從 react-start 到 co 源碼 (二)

這是一個系列文章。主要分爲三篇，講述了 react 開發環境的簡單搭建，腳手架的開發以及 co 源碼的分析。對讀者瞭解 react 和 generator 有必定的幫助。這是第二篇講述了 react 開發環境腳手架的開發。

介紹 roadhog —— 讓 create-react-app 可配的命令行工具

roadhog 是一個 cli 工具，提供 server 和 build 兩個命令，分別用於本地調試和構建。命令行體驗和 create-react-app 一致，配置略有不一樣，好比默認開啓 css modules，而後還提供了 JSON 格式的配置方式。

基於 React.js + Node.js 的開源博客框架 phoenix-blog-framework

phoenix-blog-framework 是我開發的一款我的博客框架。使用 React.js + Typescript + CSS-Modules + pug 等技術作前端，用 Node.js + Mongodb + Typescript 作後臺開發。用 Markdown 作文章寫做系統。

使用 React、Node.js、MongoDB、Socket.IO 開發一個角色投票應用 | 閒散人生 | idlelife

在本教程裏你將學習到如何使用 Node.js 構建一個 REST API、使用 MongoDB 保存和檢索數據、使用 Socket.IO 跟蹤在線的訪問者，以及使用 React + Flux 和服務端渲染來構建單頁面應用，最後將應用部署到雲端。

[[譯] 編寫 React 組件的最佳實踐](https://juejin.im/entry/58b3b...

當我一開始寫 React 的時候，我記得有許多不一樣的方法來寫組件，每一個教程都大不相同。雖然從那之後 React 框架已經變得至關的成熟，但彷佛仍然沒有一種明確的寫組件的 「正確」 方式......

React 開發中的 Provider 和 HOC 模式

React 開發中的 Provider 和 HOC 模式

將 React 應用優化到 60fps

做爲 DOM 的抽象，React 天然也遵循了著名的抽象漏洞定理（詳見 2016 - 個人前端之路: 工具化與工程化），引入 React 致使了在應用自己的性能消耗以外勢必會增長額外的性能損耗。Dan Abramov 在 Twitter 上提到，React 並不能保證性能優於原生的 DOM 實現，可是它可以幫助大量的普通開發者構建大型應用的同時沒必要在初期就耗費大量的精力在性能優化上，在大部分用戶交互界面上 React 已經可以幫咱們進行合理的優化了。可是在應用開發的過程，特別是最後的細節優化階段中，咱們須要着眼於部分性能瓶頸頁面，正確地認識這種限制的原因以及相對應的處理方案。本文便是做者在構建本身的大型應用中經驗的總結。