React Workshop

Thank you!

• Create React App.
• Matt Zabriskie for his react-workshop upon which this one is based.
• React Docs. Some examples have been lifted from there.

Note

This repository has been used to teach React several times and has been updated a few times as well. If you're following along from this recording, then you can get to the right spot by running git checkout aca94d7 before running the setup script.

Setup

You need to have the latest node, npm, and git installed. Then run:

git clone https://github.com/kentcdodds/react-workshop.git
cd react-workshop
npm run setup

All set up!

If you didn't get any errors running the setup scripts, you're ready to start the workshop! 🎉 🎊

If you want to explore a bit, there are a few things you can do:

1. go ahead and open intro/exercises-final/01-js.html in a browser (don't peak at the solution!). It should say Hello World. Go ahead and open the others if you like.
2. Then you can run yarn run storybook and open http://localhost:9009 and poke around the storybook for our exercises :)
3. Then you could run the app with yarn start. This should pop open a window with a stopwatch which we'll be building.

Any errors?

If you see any errors, read the output and try to follow any instructions. If that doesn't work, feel free to file an issue to ask for help and I'll help if I can. Good luck!

Outline

Intro

1. Bare-bones React rendering - intro/exercises/01-js.html
2. React rendering with JSX - intro/exercises/02-jsx.html
3. Custom React Components - intro/exercises/03-components.html
4. Re-rendering - intro/exercises/04-re-rendering.html

Concepts

1. Props - src/exercises/01-props.js
2. PropTypes - src/exercises/02-prop-types.js
3. Styling - src/exercises/03-styling.js
4. Composition - src/exercises/04-composition.js
5. Component API - src/exercises/05-component-api.js
6. State - src/exercises/06-state.js
7. Uncontrolled Form - src/exercises/07-uncontrolled-form.js
8. Controlled Form - src/exercises/08-controlled-form.js
9. Data Fetching - src/exercises/09-data-fetching.js
10. Higher Order Components - src/exercises/10-hoc.js
11. Render Callback - src/exercises/11-render-props.js

Testing

Check out react-jest-workshop

Architecture/Applications

Check out react-github-profile

Contributors

Thanks goes to these people (emoji key):

Matt Zabriskie 💻

Kent C. Dodds 💻 🚇 👀 ⚠️

Jordan Nielson 💻

Siddharth Kshetrapal 🚇

Ray Gesualdo 💻

Igor Konovalov 💻

Karl Horky 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT