1. React workshop 大纲
   1. 前言
      1. 不讲什么，比如build webpack，性能
      2. 不特意学 ES6+ JavaScript 语法，配置 babel
      3. 不用学什么，比如eslint，rules更重要但只需要一些设置即可
      4. 作为 team leader 和 teammates 的关注点不同
         1. 比如说 lint 更重要
         2. 比如说多 envs 支持
   2. 自顶向下，从 atomic design 开始
      1. 如何划分UI区域，拆卡
         1. 边讲边画出组件树，对应到 function
      2. 思考container components
         1. async 请求, setTimeout
         2. (simply) manage states
      3. 思考tranctional components
         1. 思考「微前端」在 三靠谱 的具体实践？
         2. 主要在于团队内结构（不分前后端）与团队间的合作（组合型页面）
   3. Component-Driven Development (CDD)
      1. 从一个div讲起，一步步被封装成一个宇宙/人
      2. storybook就用于调试每一个component的styling
      3. 试试tdd，不同时刻不同工具
         1. tdd components，即 data 如何对应到 view
         2. tdd business logic，即 event 如何对应到 state
   4. React Components
      1. JSX & VM
         1. 从一个 f(data) => view 的函数说起 +jsx +vdom +lifecycle
            1. stateless components
         2. jsx 屏蔽掉了很多东西（React Element, Component, Instance）createElement
         3. virtual dom 是怎么玩的？为啥要全部 re-render？为什么需要 immutable.js
      2. Lifecycle API
         1. constructor(object props) 而不是 componentWillMount()
         2. componentDidMount() 处理异步，fetch or axios 实践
         3. shouldComponentUpdate
   5. State/Data Management
      1. Redux 则帮你屏蔽了 State 和 Component 的概念，即只需要写 function 即 stateless components 就好
      2. 至于 Business Logic 可以被 Redux 完美 cover，且可 TDD…
   6. Integrated with AEM
      1. AEM 和 React 是怎么在一起愉快地玩耍的？ · Issue #129
2. 参考资料
   1. [Component Libraries | myThoughtWorks](https://thoughtworks.jiveon.com/message/1304058-re-component-libraries)
   2. [Learning Node/React The Right Way | myThoughtWorks](https://thoughtworks.jiveon.com/thread/635716-learning-nodereact-the-right-way)
   3. Learning React Native - Express
3. Nice to have
   1. 组件化
      1. Component-Driven Development (CDD)
      2. What's Atomic Design？with React？
   2. 使用 generator 搭建项目(+修改)
      1. `create-react-app`
      2. `react-app-stencil`
   3. 组件化 styling
      1. - [ ] （顺手）熟悉 Webpack loader 机制
      2. - [ ] 添加 css-modules 支持（with Intellij）
   4. NPM 相关
      1. npm scripts (clean, serve, build, lint, lint:fix, etc)
      2. 搭建 register，已有 npm digital register
         1. 刚好切换至 taobao register 加快速度
      3. 使用 npm publish 版本 semantic versioning (https://docs.npmjs.com/getting-started/semantic-versioning)
      4. 介绍 yarn（提一句 cnpm）
         1. package versions lock
         2. 安装 packages 时的区别
   5. 在 React 中使用 JavaScript 高级技巧 #170
      1. ESNext+ 只在特定（React）使用情况下才讲
      2. 实际场景实际重构，穿插地讲一些高级特性