objectpartners / react-redux-workshop

Slides published here

React Redux Workshop Labs and Slides

---

The repository for the react-redux content, primarily labs and the slidedeck.

Additional Info

• Hosted slides
• Labs
• Completed product

Slides and labs for the accompanying workshop demo repo

Labs

Lab markdown files are located in the labs folder

Slide Deck

The slide deck is located in the slidedeck folder. The published slides are located here

react-redux-workshop's Issues

Setup yarn workspaces

This (seemingly trivial) change will speed up our build process a bit and generally be a marked improvement over two disparate folders.

However, when setting it up, seems like slide deck at least (and possibly labs) have some issues, so we'll need to iron those out.

Fix issue with TypeScript false reporting "has no exported member"

Change two day workshop to one day workshop

Change Unstated to Immer

I think Immer has kinda moved ahead of Unstated, so let's change the slide. It's a different enough paradigm that I think it's worth covering/explaining too!

Structure the labs as a standalone website (using something like Gatsby)

The slides should introduce concepts, that the labs then briefly go through

The labs should be a self-contained, hosted resource that anyone can go in and hit whenever they'd like. Longer term, we could do things like videos, like React content (e.g. component playgrounds), etc. etc.

Remove "start the server" section from lab-01

Once objectpartners/react-redux-api#5 is done, remove the section from the first lab.

Remove last section (deployment)

This section is TD specific, so we don't really even need it at all.

Remove TD Ameritrade branding on Context example

This slide

If you need to fork the sandbox, please do!

Remove TD specific stuff from the sidebar/external link

Just need to remove some links that were specific to TD

This file in particular will have to be edited!

Clean up redux section and clarify concepts

After going through the Redux slides, I think there's a bit too much info and things that aren't needed to teach the foundational concepts.

Let's clean them up a bit to improve clarity.

Look into using docker (or some other solution) to iron out environment issues

We (still) almost every time run into issues with people's environments not being configured correctly.

If we could create a docker image that contains required versions for things, that would be pretty neat. We could certainly build the server side stuff so that each user doesn't have to run that in a separate command

Lab 3: Add an import to App.css

We forgot the App.css import, so let's fix that. From @tmartensen:

either add the import './App.css'; to the file or add it to the instructions

Add CodeSandbox Links/Markdown file to labs

Let's add a CodeSandbox section (in Tips and Tricks) we can fall back on if stuff goes wrong day of.

Change instructions to use yarn instead of npm

Change instructions to use yarn instead of npm

Consider adding slides on React Error Boundaries

See https://reactjs.org/docs/error-boundaries.html. New in React 16.

Fix broken images in lab4

From @tmartensen

images at the end of lab 4 are broken

Move all react-live instances to CodeSandbox

For example, this slide can be hard to explain because sometimes monitor resolutions make it challenging to see what we're typing! Just embed the CodeSandbox iFrame and we'll be good to go!

Add a Formik CodeSandbox example

Similarly to this slide it'd be great to have a Formik example we can walk through to show the difference between form libraries.

Move the validate script into the actual repo they'll be working from

In other words, move the validate script out of this repo--including moving the prereqs and setup instructions--into this repo

_Consider_ changing all code snippet answers in the labs to use details/summary

You can details/summary to display content as collapsible. This will slightly lessen the copy/pasting that people tend to do. An example

<details>
<summary>Click to expand me pls</summary>
```js
var a = 'b';
```
</details>

Click to expand me pls

```js var a = 'b'; ```

Images don't work in slide deck when hosted/published