Hello new friend 👋

This workshop has moved to reactworkshop.co please go there

Welcome to Swizec's Intro to React & Redux Workshop. Today you will build your first webapp with React and Friends. <Tomorrow> you will build a more complex app that uses Redux for state management.

Your 1st day starts at the very beginning: Why React? What problem does it solve? What makes it tick? What's the ecosystem like? Why are components the future?

Your 2nd day starts with the idea that you magically remember everything and are now a pro. Don't worry if you're not, Swizec is here to help and he's going to code everything with you. If you get lost, sit back and observe. Checkout the example repo at key points so you can catch up.

Join the Slack Group it's the best place for everyone to chat offline

By the end of the day you'll have built your first React app.

Something like this 👇

A static list of tickets pulled from StubHub's API with some controls to change what you can see.

By the end of the 2nd day, you'll have built something like this👇

A small StubHub app that lists event tickets from the StubHub API lets you add them to a shopping cart and "buy" them with a fake API call. It uses Redux to manage state, redux-form to manage forms, and React Router to help you hop around.

Swizec Teller

I'm Swizec, I'll be helping you out today

You can find out stuff about me if you ask Google. But generally speaking I've:

• been coding for over 20 years
• published Why Programmers Work at Night, that was fun
• published Data Visualization with D3.js, dare ask me about publishers
• published 3 editions of React + D3, that's been great
• helped over 10,000 people become better engineers
• made this interactive ES6+ cheatsheet — es2017.io

Here are some cool things I've built with React

• Animated typing
• Canvas billiards game
• Particle generator
• Pythagorean fractal tree
• Space Invaders
• Tech salary visualization
• This page :)

No, these projects are not practical, but they demo well :)

Let's get down to business

This is an interactive workshop. If you have a question, ask. If something doesn't make sense, ask. If something is confusing, ask. If I'm not making sense, ask. If your code doesn't work, ask.

You will write code today. The code will live on your computer.

We will take breaks.

But first ask yourself this: Why are you here?

Answering that question will help you get the most out of this workshop.

Code you'll write today works with React 16 and uses modern ES6+. We'll assume a development environment created with create-react-app. This gives us some special powers. I will point them out.

Setlist - Day 1

Setlist - Day 2