kentcdodds / react-workshop

Exercises as part of a React workshop

Home Page:http://react-workshop.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Workshop

Build Status MIT License All Contributors PRs Welcome

Donate Code of Conduct Watch on GitHub Star on GitHub Tweet

Sponsor

Thank you!

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
Matt Zabriskie

πŸ’»
Kent C. Dodds
Kent C. Dodds

πŸ’» πŸš‡ πŸ‘€ ⚠️
Jordan Nielson
Jordan Nielson

πŸ’»
Siddharth Kshetrapal
Siddharth Kshetrapal

πŸš‡
Ray Gesualdo
Ray Gesualdo

πŸ’»
Igor Konovalov
Igor Konovalov

πŸ’»
Karl Horky
Karl Horky

πŸ“–

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

LICENSE

MIT

About

Exercises as part of a React workshop

http://react-workshop.netlify.com/

License:MIT License


Languages

Language:JavaScript 95.5%Language:HTML 3.8%Language:CSS 0.6%