Intro to React 16 & Redux โ€” a Swizec Workshop

Hello new friend ๐Ÿ‘‹

This workshop has moved to 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:

Here are some cool things I've built with React

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.

Here's our setlist for today ๐Ÿ‘‡

Setlist - Day 1

Setlist - Day 2

Before you leave

Thank you for coming!

Please fill out this feedback form. It helps me calibrate future workshops.

Enjoy this video of Kiwi

~ Swizec