Series Summary / Lesson Listing

[erikthedeveloper]

Building an App with React and Redux

This issue serves as a scratch pad to flush out how to best break this project down into Egghead sized lessons :smile:

Intro and Initial Setup

These lessons being very short highlighting the fact that setup/dev tooling does not have to be so damn complicated :smile:

• ListApp Introduction and Series Overview
• Starting a Project Without a Boilerplate
  • :memo: npm, package.json, git, .gitignore
• Bundling Javascript Modules with Webpack (Simplified)
  • :memo: webpack + Minimal config + npm commands (absolute minimum to build + index.html)
• Serve and Reload Our Project Using Webpack's Dev Server (Simplified)
  • :memo: webpack-dev-server + build watch + reload via --inline (No fancy hotness (hot-reloader, browser-sync, dev tools, etc...))
• Enable ES6+ and JSX with Babel
• Installing React and Rendering to the Browser

  Defining UI as Components with React

Focus on React-specific concepts/techniques and pave some ground work for an easier introduction to Redux.

• Rapidly Scaffold App Structure and UI as Components (~2 lessons)
  • :memo: Think "sketching if we were drawing". Using DUMMY_DATA.
• Extracting Small, Private Components Within a Module
• Extracting and Organizing Components into Separate Modules
  • :memo: Extract components from our "Big Bang" App.js into components/*
• Fetching Data from an API with React Components
  • before scaffold UI or after:question:
  • :memo: superagent + absolute minimum http/apiClient.js module
• Extracting Container Components to Separate Data Fetching and Presentation
  • _Follow up lesson to :arrow_doubleup:
• Using "Controlled" Components to Embrace One Way Data Flow
• refs with React (new callback refs approach)
  • :memo: Implement "focus on input at the end of value"
• Deconstructing a Complex React Component into Smaller, "Dumb" Components (~2 lessons)
  • :memo: ListView -> [TextForm, ListItem]
• Submitting Data to an API with React Components
  • :memo: Handling async operations... synchronously (thinking in React)

    Embrace the Redux!

Make use of Redux. Refactor some of the "React Way" approaches to make use of Redux. Expand on and add new functionality using Redux.

• Introduce Redux and Review Affected Areas of the App
  • :memo: Not sure how to break this one out into a lesson. I feel like it is legit if kept brief/simple/high level.
• Install and Setup [redux, react-redux]
• Promoting State and Actions from React Components to Redux (:scissors: split)
  • :memo: Promote something simple (i.e. activeList)
  • Action: selectList => id => ({type: 'SELECT_LIST', id})
  • Reducer: rootReducer handles only SELECT_LIST and returns state = {activeList}
  • connect-ing Components to "read" Redux State Using react-redux
• Introducing a New Feature Using Redux
  • :memo: Implement "item filters" [active, complete, all]
• Loading data from an API using Redux and thunks (:scissors: split)
  • Install/Introduce redux-thunk (it's only 8 LoC Dan tweet)
  • Begin w/ action names, state, and "simple reducer" <-- no concept of async
  • Defining Async Redux actions with redux-thunk
• Submitting data to an API using Redux and thunks (:scissors: split)

  Tie it All Up

.... [TODO] any type of intermediate topics, optimizations, etc... that the series could do without (but could make good add-ons)