Introduction to React

This workshop will give a whirlwind tour of React and Redux, demonstrating the core principles and providing a platform to build on.

Open presentation slides

Focus of this workshop

We will learn about React and build React components using the well-known Todo application as our use-case. After making a few components and making them render to the screen, we'll install Redux. We'll then move our state over to be handled by Redux and inject it back into React.

Time estimate: 4-6 hours

Intended audience

Compared to other Nerdschool workshops, this one is considerably more advanced.

Since React - and the other libraries we'll use - are libraries for JavaScript, there is an expectation that you have a fair understanding of:

• JavaScript
• Web development (you know how request/response works and have used Chrome Developer Tools (F12) or similar).

What you need

• Google Chrome
  • Extension: React Developer Tools
  • Extension: Redux DevTools
• A modern text editor that understands JavaScript and React. We recommend Visual Studio Code but others such as Web Storm and Atom are good choises.
• NodeJS and npm installed on your machine. You should have the latest LTS release of NodeJS or later, which (when writing this) is 10.13.0 of node and 6.4.1 of npm. Use node -v and npm -v to check your version.

How to get started

• Start by cloning this repository into a folder on your computer. If you've never used git before, you can alternatively use the the "Download ZIP" button to the right.
• Although you have this README.md file on your computer it's easier to read it on GitHub, so we recommend you keep this page open with the exercise tasks.

Exercises

This repository contains a set of exercises organized in folders. Each folder contains a README.md describing the exercise.

• Exercise 1 - Getting started (start here)
• Exercise 2 - React components
• Exercise 3 - React
• Exercise 4 - Component state
• Bonus 1 - Redux
• Bonus 2 - Using Redux
• Bonus 3 - Completing the app

Symbols and notation used in exercises

Icons with special meaning

✏️ - A task you should do
📖 - A section of text to read (no tasks, just information).
💡 - Additional information.
❗ - Something important.
❓ - Open-ended question for the reader ("What do you think would happen if...")
💩 - Bad practice (don't-do-this)
⭐ - A bonus task (not required)

Keyboard keys

Will look like this:

CTRL + ALT + C

Diff blocks

Emphasizes how lines of text should change.

- this text was removed
+ and replaced with this text