博客 / 列表

陳學家_6174 - React 產品實現 -任務管理工具“氫”

原文地址：https://zhuanlan.zhihu.com/p/...，歡迎轉載 ：-） ? 關於 其實對於這個專欄的訂閲用户感到非常抱歉，已經停更很久了，也沒啥特別的理由就是懶 orz！不對，畫風不能這樣開頭，是這樣的，我覺得我應該用 React 去做點兒什麼，寫文章能夠清晰我的思路，讓我和別人有交流，但是並沒有實際做產品那麼性感，於是我決定要用 React 來做一些產品出來，於是就

react , macos , 產品設計 , electron , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 4.3 React Tricks

react tricks 編輯中。。。 React 自身提供的 API 並不多，但總有一些比較 trick 的 API 和點是平時可能忽略的，本節將列舉一下相關的點。 setState setState function param setState 延遲 ref ref as funct

leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 4.2 react patterns

書籍完整目錄 4.2 react patterns 修改 Props Immutable data representation 確定性 在 getInitialState 中使用 props 私有狀態和全局事件 render 包含 side effects

react , leanreact , 前端 , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 4.1 react 代碼規範

書籍完整目錄 4.1 react 代碼規範 關於 基礎規範 組件結構 命名規範 jsx 書寫規範 eslint-plugin-react 關於 在代碼的設計上，每個團隊可能都有一定的代碼規範和模式，好的代碼規範能夠提高代碼的可讀性便於協作溝通，好的模式能夠上層設計上避免不必要的 bug 出現。本節會參考社區提供一些

react , leanreact , 前端 , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 3.5 compose redux sagas

書籍完整目錄 3.5 compose redux sages 基於 redux-thunk 的實現特性，可以做到基於 promise 和遞歸的組合編排，而 redux-saga 提供了更容易的更高級的組合編排方式（當然這一切要歸功於 Generator 特性），這一節的主要內容為： 基於 take Effect 實現更自由的任務編排 fork 和 cancel 實現非

react , leanreact , 前端 , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 3.4 掌控 redux 異步

書籍完整目錄 3.4 redux 異步 在大多數的前端業務場景中，需要和後端產生異步交互，在本節中，將詳細講解 redux 中的異步方案以及一些異步第三方組件，內容有： redux 異步流 redux-thunk redux-promise redux-saga 3.4.1 redux 異步流 前面講的 redux 中的數據流都是同步的，

react , redux , leanreact , 前端 , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 3.3 理解 redux 中間件

書籍完整目錄 3.3 理解 Redux 中間件 這一小節會講解 redux 中間件的原理，為下一節講解 redux 異步 action 做鋪墊，主要內容為： Redux 中間件是什麼 使用 Redux 中間件 logger 中間件結構分析 applyMiddleware 中間件的執行過程 3.3.1 Redux 中間件是什麼

react , redux , leanreact , 前端 , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 3.2 Redux TodoApp

書籍完整目錄 3.2 Redux TodoApp 上一節講完了 redux 中的概念，但是仍然沒有和 react 聯繫起來，這一節 將利用 redux 在 react 中實現完整的 todolist： 在 react 使用 redux 通過 Provider 連接 react 和 redux store 創建 action creators

react , leanreact , 前端

陳學家_6174 - 精益 React 學習指南 （Lean React）- 3.1 redux 介紹

書籍完整目錄 3.1 開始使用 redux 前面我們介紹了 flux 架構以及其開源實現 redux，在這一節中，我們將完整的介紹 redux: redux 介紹 redux 是什麼 redux 概念 redux 三原則 redux Stores redux Action

react , flux , redux , leanreact , 前端

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.5 webpack 進階

書籍完整目錄 2.5 webpack 進階 配置分離 code splitting 異步加載 理解 webpack chunk webpack 調試 2.5.1 配置分離 在大型項目中，可能 webpack.config.js 會變得越來越臃腫，這個時候可以利用做 webpack-merge 插件。將配置定義在一個目錄下面的不同文件中，然

react , 前端工程化 , webpack , leanreact , 前端

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.4 webpack + gulp 構建完整前端工作流

書籍完整目錄 2.4 webpack + gulp 構建完整前端工作流 在前面的兩個小節中已經完整的講了 webpack 和 gulp 相關的內容，本小節中將會結合二者構建一個完整的前端工作流，內容目錄為： 前端工程結構和目標 前端工程目錄結構 gulp clean gulp copy gulp less gulp au

react , 前端工程化 , 前端架構 , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.3 gulp

書籍完整目錄 2.3 Gulp 在前端工程化中最重要的就是流程管理，借用 gulp 可以很方便的基於流的方式定義流程任務，並將任務串聯起來，本節中將詳細介紹 gulp ，包括： gulp 介紹 gulp 是什麼 gulp 能夠解決哪些問題 gulp 核心思想和特點 gulp 安裝

gulp , react , 前端工程化 , leanreact , 前端

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.2 webpack

書籍完整目錄 2.2 webpack 這一節中我們將系統的講解 webpack ，包括： webpack 介紹 webpack 是什麼 為什麼引入新的打包工具 webpack 核心思想 webpack 安裝 webpack 使用 命令行調用

react , 前端工程化 , leanreact , 前端

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.1 前端工程化概述

書籍完整目錄 2.1 前端工程化概述 在前端開發的初始階段，開發者通常只用關 html, css, javascript。但是現代化的前端開發已經不僅僅是業務代碼本身，真正的前端開發環境涉及很多方面的需求，如： 開發需求 共享需求 性能需求 部署需求 這些東西我們都統一的叫做前端工程化，為了簡化前端工程化的配置，出現了很多優秀的工具比如：

react , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 1.6 Flux

書籍完整目錄 1.6 flux 這一節將介紹 React 的核心應用架構模式 Flux，包括內容： Flux 介紹 MVC 架構之痛 Flux 的理解 Flux 相關庫和工具介紹 Flux 與 React 實例 最後我們將會把之前的 TODOMVC 改為 Flux 的架構。 1.6.1 Flux 介紹 簡單來講，Flux 是

react , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 1.5 React 與 DOM

書籍完整目錄 1.5 React 與 DOM 在這一節中，主要的討論範圍為 React 與 DOM 相關的處理，包括： 如何獲取 DOM 元素 如何做事件響應處理 表單處理 style 屬性 這節講述過後，我們將會為 TODO 應用添加完整的事件響應，包括新增，刪除，標記完成等。 1.5.1 獲取 DOM 元素 上一節我們已經講過組件的生

react , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 1.4 React 組件生命週期和方法

書籍完整目錄 1.4 React 組件生命週期 官方文檔 1.4.1 組件 React 中組件有自己的生命週期方法，簡單理解可以為組件從 出生（實例化） - 激活 - 銷燬 生命週期 hook。通過這些 hook 方法可以自定義組件的特性。 除此之外，還可以設置一些額外的規格配置。 這些生命週期方法都可以在調用 React.createClass 的參數對象中傳入， 我們已經使用過

react , leanreact

陳學家_6174 - 精益 React 學習指南 （Lean React）- 1.3 React 組件

書籍完整目錄 1.3 React 組件 1.3.1 React 組件介紹 在 React 中組件是第一元素，是 React 的基礎，一個 React 應用就是基於 React 組件的組合而成。 前面的 JSX 練習過後，大家應該對 React 組件不陌生了，在這一節我們將温習以及深入學習 React 組件。 1.3.2 創建一個 React 組件 創建一個 React 組件的方法為，

react , leanreact , HTML , Javascript

陳學家_6174 - 精益 React 學習指南 （Lean React）- 1.2 JSX 語法

書籍完整目錄 1.2 JSX 語法 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 語法聽上去很討厭，但當真正使用的時候會發現，JSX 的寫法在組件的組合和屬性的傳遞上提供了非常靈活的解決方案。 在學習本節的時候，希望讀者在閲讀的同時能夠實際編碼體驗 JSX ，寫代碼的意思是真的要寫.代.碼。 1.2.

react , leanreact , HTML , html5

陳學家_6174 - 精益 React 學習指南 （Lean React）序

Lean React 目前本書正在撰寫過程中，將這個目錄結構先發出來，希望能得到更多讀者的反饋，有興趣的朋友可以回覆訂閲更新 關於 應該是在 2013 年我還在天貓的時候，在一次團隊會議中 Teamleader 邀請了來自 Facebook 的前端工程師來分享他們的開發棧，其中就有提到 React，當説到它有自己的獨特語法的時候（JSX 語法），我對此不屑一顧，認為這樣的前端框架只會曇花一現，頂

react , leanreact