Redux itself is a meaty enough topic on its own. Split it out from the React ones. Possibly create react/ & redux/ subfolders? Maybe the redux/ folder will start over at Step 0, which will have all of the React code done? That way we can start directly at the Redux ones (see #27).

The workshop steps are broken up by app functionality, where each step aims to teach one or more React concepts. At the top of each step README we should list the concepts they'll learn in the step.

May also want to include somewhere on the main README too. Maybe listing a Concepts section and mentioning which step they're covered

After #25, flesh out more steps for Redux. Only 2 steps for redux is pretty crazy. It's benefitting from the step that does the "action reducers." Redux can be its own entire workshop.

Step ideas:

• Make the first step the "action reducers" step from React workshop to warm folks to the idea
• Set up <Provider>
• Create action & reducer for selecting an item in EmailList
• connect() EmailList
• handling API side effects with redux-thunk (maybe try others like redux-saga too)
• logging (see #21)
• selectors

(make sure to upgrade to latest version of Redux: https://github.com/reduxjs/redux/releases)

Investigate whether or not it'd be possible to have the package.json and node_modules in the root. Each step shares the same ones so no point duplicating across all. Would have to figure out how to easily start the apps in each folder.

Right now the dataset, REST API & App functions all deal with unread, which is a negative word. So things get real confusing when you have {unread: false}, which really just means {read: true}.

So need to flip the dataset, REST API & App functions to deal with read instead of unread

Step 9 (mark read/unread) seems less important than Step 10 (styling) because I don't think we learn anything new. It's just more application of existing concepts. If time was tight, learning about styling & conditional styling would be more important.

Let's swap 'em

In the Styling step where we focus on styling with CSS classes, also mention that manual styles can work too w/ an object literal

When deleting from email list item as well as email view, add an exercise to add a delete confirmation instead of the email just getting deleted

For redux workshop add in redux-logger and redux-devtools-extension so we can see what's going on. Do this with #27. Add an exercise bullet point to install the extension in Step 0

Step 11 creates an email form modal so this would be a good opportunity to use React 16 portals

For those that don't want to code along with me because they learn better by just watching and absorbing, provide "pre-exercise" step folders. These would be the code for the step before doing the exercises. That way they can follow along while I live code, but still get to do some coding to reinforce learning

Unit testing in React is super duper important and not something that's not well understood. Create steps for testing React as well as Redux

Ideas:

• Show jest + enzyme (w/ enzyme matchers)
• Talk about snapshots
• Testing event handlers
• Mocking APIs

With #25 we could either having a separate testing/ folder or just add additional steps to react/ & redux/ for testing. Learning towards the former

Figure out bonuses/embellishments that more advanced folks can do while they wait for everyone else to catch up.

Add a tag at the last commit before giving a workshop

The difference between PureComponent & Component is nuanced and only really something that can be explained after Step 4, yet it always gets asked in Step 2. As beginners they don't really need to know about it anyway.

In Step 2 where we discuss components, should include some examples of alternate return types besides just JSX like arrays (React 16), null, booleans, etc.

Using property functions instead of methods, we don't have to worry about calling .bind() everywhere

Here's just a running list of improvements to the workshop to make it better for everyone:

1. Switch Step 5 to flesh out the EmailView first, and then pause for everyone to catch up. Then pass down the callback handlers to EmailListItem and do the exercise
2. Figure out bonuses/embellishments that more advanced folks can do while they wait for everyone else to catch up
3. Add some styling earlier on (maybe at end of Step 3?)

Try to host the app somewhere so that during the workshop, we can just all look at the hosted app instead of having to run the end app locally. Just less things that can go wrong.

Will need the "database" to live somewhere. Look into Firebase: https://css-tricks.com/intro-firebase-react/

Building the email view interaction is pretty involved and is too much to grok in one go, especially how it's currently organized. It currently teaches:

• Rendering unencoded content with dangerouslySetInnerHtml
• Maintaining state
• Conditionally rendering components
• Passing down event handlers so that parent components can know when stuff happens to child components

So I think the flow should be as follows:

1. Explain in the user interaction we want with email view
2. Explain how we'll accomplish the user interaction in React code
3. Update EMAILS constant in App to have the additional date & message data
4. Pass EMAILS[x] to <EmailView /> in App
5. Update EmailView to have propTypes defined and display the information including dangerouslySetInnerHtml
6. Add selectedEmailId to state in App and use .find() to get the selectedEmail to pass to <EmailView /> (default to an existing email ID)
7. Show conditional component rendering in order to default this.state.selectedEmailId to -1
8. Add _handleItemSelect in App and pass it to <EmailList onItemSelect /> explaining why we need it
9. Pass onItemSelect in EmailList through to each <EmailListItem />
10. Add onClick to <div> in EmailListItem and handle with _handleClick, passing email.id

Some steps have React DevTools explorations at the end of Tasks. Move to the first in Exercises

Fragments are super helpful when dealing with non-list multiples. Find a use case for them or add a new step

Consider adding fiddly in order to generate a website for the workshop from the README docs and host it on Netlify at https://react-workshop.benmvp.com/