upgrade react-workshop-app

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["babel-preset-react-app"]
+}

.gitignore

@@ -1,4 +1,6 @@
+.DS_Store
 node_modules
 coverage
 build
 .idea/
+.vscode/

.travis.yml

@@ -2,9 +2,7 @@ sudo: false
 language: node_js
 node_js: stable
 install: echo "Installation happens in the setup script"
-cache:
-  directories:
-    - node_modules
+cache: npm
 notifications:
   email: false
 branches:

CODE_OF_CONDUCT.md

@@ -1,74 +1 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of
-experience, nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, or to ban temporarily or permanently any
-contributor for other behaviors that they deem inappropriate, threatening,
-offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at kent@doddsfamily.us. All complaints
-will be reviewed and investigated and will result in a response that is deemed
-necessary and appropriate to the circumstances. The project team is obligated to
-maintain confidentiality with regard to the reporter of an incident. Further
-details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+Please refer to [kentcdodds.com/conduct/](https://kentcdodds.com/conduct/)

CONTRIBUTING.md

@@ -26,12 +26,6 @@ series [How to Contribute to an Open Source Project on GitHub][egghead]
 > can make all of your pull request branches based on this `master` branch.
 > Whenever you want to update your version of `master`, do a regular `git pull`.
 
-## Committing and Pushing changes
-
-Please make sure to run the tests before you commit your changes. You can run
-`npm run test` and press `u` which will update any snapshots that need updating.
-Make sure to include those changes (if they exist) in your commit.
-
 ## Help needed
 
 Please checkout the [the open issues][issues]
@@ -41,4 +35,4 @@ requests! Thanks!
 
 [egghead]:
   https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
-[issues]: https://github.com/kentcdodds/advanced-component-patterns-v2/issues
+[issues]: https://github.com/kentcdodds/advanced-react-patterns/issues

OUTLINE.md

@@ -33,16 +33,16 @@
 ## Schedule
 
 - 😴 Logistics
-- 🏋 Context
+- 💪 Context
 - 😴 10 Minutes
-- 🏋 Compound Components
-- 🏋 Flexible Compound Components
+- 💪 Compound Components
+- 💪 Flexible Compound Components
 - 🌮 30 Minutes
-- 🏋 Prop Collections and Getters
+- 💪 Prop Collections and Getters
 - 😴 10 Minutes
-- 🏋 State Reducers
+- 💪 State Reducers
 - 😴 10 Minutes
-- 🏋 Control Props
+- 💪 Control Props
 
 ## Scripts
 
@@ -62,14 +62,16 @@ Please do ask! Interrupt me. If you have an unrelated question, please ask on
 
 ## Exercises
 
-- `src/exercises/0x.md`: Background, Exercise Instructions, Extra Credit
-- `src/exercises/0x.js`: Exercise with Emoji helpers
+- `src/exercise/0x.md`: Background, Exercise Instructions, Extra Credit
+- `src/exercise/0x.js`: Exercise with Emoji helpers
 - `src/__tests__/0x.js`: Tests
-- `src/exercises-final/0x.js`: Final version
+- `src/final/0x.js`: Final version
 
 ## Emoji
 
 - **Kody the Koala Bear** 🐨 "Do this"
+- **Matthew the Muscle** 💪 "Exercise"
+- **Chuck the Checkered Flag** 🏁 "Final"
 - **Marty the Money Bag** 💰 "Here's a hint"
 - **Hannah the Hundred** 💯 "Extra Credit"
 - **Olivia the Owl** 🦉 "Pro-tip"

README.md

@@ -18,10 +18,12 @@ simplicity.
 ## Pre-Workshop Instructions/Requirements
 
 In order for us to maximize our efforts during the workshop, please complete the
-following things to prepare (the TV emoji 📺 indicates steps that are only
-necessary if the workshop is remote via Zoom):
+following things to prepare.
 
-- [ ] Setup the project (follow the setup instructions below) (~5 minutes)
+- 📺 indicates steps that are only necessary if the workshop is remote via Zoom
+- 👋 indicates steps that are specific to the material for this workshop
+
+- [ ] 👋 Setup the project (follow the setup instructions below) (~5 minutes)
 - [ ] 📺 Install and setup [Zoom](https://zoom.us) on the computer you will be
       using (~5 minutes)
 - [ ] 📺 Watch
@@ -30,17 +32,17 @@ necessary if the workshop is remote via Zoom):
 - [ ] Watch
       [Setup and Logistics for KCD Workshops](https://egghead.io/lessons/egghead-setup-and-logistics-for-kcd-workshops)
       (~24 minutes). Please do NOT skip this step.
-- [ ] Watch [The Beginner's Guide to React](https://kcd.im/beginner-react)
+- [ ] 👋 Watch [The Beginner's Guide to React](https://kcd.im/beginner-react)
       (available free on Egghead.io), or have the equivalent experience (77
       minutes)
-- [ ] Watch my talk
+- [ ] 👋 Watch my talk
       [Why React Hooks](https://www.youtube.com/watch?v=zWsZcBiwgVE&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
       (35 minutes)
-- [ ] Go through my
+- [ ] 👋 Go through my
       [Learn React Hooks Workshop](https://kentcdodds.com/workshops/hooks), or
       have the equivalent basic experience of using hooks. You should be
       experienced with `useState`, `useEffect`, and `useRef`.
-- [ ] Go through my
+- [ ] 👋 Go through my
       [Advanced React Hooks Workshop](https://kentcdodds.com/workshops/advanced-react-hooks),
       or have the equivalent experience. You should be experienced with
       `useContext` and `useReducer` (experience with `useMemo` and `useCallback`
@@ -62,8 +64,8 @@ Here are the patterns we'll be covering:
 ## System Requirements
 
 - [git][git] v2 or greater
-- [NodeJS][node] v10 or greater
-- [npm][npm] v5.2.0 or greater
+- [NodeJS][node] v8 or greater
+- [npm][npm] v6 or greater
 
 All of these must be available in your `PATH`. To verify things are set up
 properly, you can run this:
@@ -80,17 +82,6 @@ variable and how to fix it here for [windows][win-path] or
 
 ## Setup
 
-You may be able to work through the entire workshop in the browser. It requires
-absolutely no setup whatsoever, though people do sometimes have trouble with it
-working perfectly. However, if you would like to try it, go to
-[this codesandbox](https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns)
-and you should be good to go.
-
-[![Edit advanced-react-patterns](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns)
-
-If you'd rather be able to work through the workshop on your own computer, then
-follow the following instructions.
-
 After you've made sure to have the correct things (and versions) installed, you
 should be able to just run a few commands to get set up:
 
@@ -103,10 +94,16 @@ npm run setup --silent
 This may take a few minutes. **It will ask you for your email.** This is
 optional and just automatically adds your email to the links in the project to
 make filling out some forms easier If you get any errors, please read through
-them and see if you can find out what the problem is. You may also want to look
-at [Troubleshooting](#troubleshooting). If you can't work it out on your own
-then please [file an issue][issue] and provide _all_ the output from the
-commands you ran (even if it's a lot).
+them and see if you can find out what the problem is. If you can't work it out
+on your own then please [file an issue][issue] and provide _all_ the output from
+the commands you ran (even if it's a lot).
+
+You may be able to work through the entire workshop in the browser. Go to
+[this codesandbox](https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns)
+and you should be good to go. Note that sometimes people have trouble with
+codesandbox not working quite right with tests, but you should be able to work
+around that. If you're concerned, then it would probably be better to just set
+things up locally.
 
 ## Running the app
 
@@ -116,10 +113,8 @@ To get the app up and running (and really see if it worked), run:
 npm start
 ```
 
-Click around and become familiar with the app and the exercises.
-
 This should start up your browser. If you're familiar, this is a standard
-[react-scripts](https://github.com/facebook/create-react-app) application.
+[react-scripts](https://create-react-app.dev/) application.
 
 You can also open
 [the deployment of the app on Netlify](https://advanced-react-patterns.netlify.com/).
@@ -131,18 +126,21 @@ npm test
 ```
 
 This will start [Jest](https://jestjs.io/) in watch mode. Read the output and
-play around with it.
-
-**Your goal will be to go into each test, swap the final version for the
-exercise version in the import, and make the tests pass**
+play around with it. The tests are there to help you reach the final version,
+however _sometimes_ you can accomplish the task and the tests still fail if you
+implement things differently than I do in my solution, so don't look to them as
+a complete authority.
 
-## Helpful Emoji 🐨 💰 💯 🦉 📜 💣 🚨
+## Helpful Emoji 🐨 💪 🏁 💰 💯 🦉 📜 💣 👨‍💼 🚨
 
 Each exercise has comments in it to help you get through the exercise. These fun
 emoji characters are here to help you.
 
 - **Kody the Koala Bear** 🐨 will tell you when there's something specific you
   should do
+- **Matthew the Muscle** 💪 will indicate what you're working with an exercise
+- **Chuck the Checkered Flag** 🏁 will indicate that you're working with a final
+  version
 - **Marty the Money Bag** 💰 will give you specific tips (and sometimes code)
   along the way
 - **Hannah the Hundred** 💯 will give you extra challenges you can do if you
@@ -156,19 +154,6 @@ emoji characters are here to help you.
 - **Alfred the Alert** 🚨 will occasionally show up in the test failures with
   potential explanations for why the tests are failing.
 
-## Troubleshooting
-
-<details>
-
-<summary>"npm run setup" command not working</summary>
-
-Please read through the error message and identify the step that is failing.
-There should be an error message that will hopefully help guide you to the
-solution. If it doesn't, please copy and past _all_ of the output into a new
-issue on the project repository.
-
-</details>
-
 ## Contributors
 
 Thanks goes to these wonderful people