Exercises as part of a React workshop
JavaScript HTML CSS
Pull request Compare This branch is 36 commits ahead, 8 commits behind mzabriskie:master.

README.md

React Workshop

Build Status Dependencies MIT License All Contributors PRs Welcome

Donate Code of Conduct Watch on GitHub Star on GitHub Tweet

Thank you!

Setup

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

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

Note on yarn

If you don't have yarn installed and don't want to use it for some reason, you can use npm as well. Instead of yarn run setup, run node ./scripts/install && npm run validate and enjoy waiting (and hopefully things don't break for you). May be a good idea to still run node ./scripts/verify to verify you have the right version of other things too.

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. State - src/exercises/05-state.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-callback.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

💻

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

LICENSE

MIT