Hands-on React to Get You Started Quickly

 2 Reviews Add a review

Published May 2017

Bite size lessons on Facebooks JavaScript UI library, React.

You’ve heard the hype. Everyone and their cat is talking about React.js, the JavaScript UI Library from Facebook. That’s because it takes a dramatically different approach to building UIs, an approach that is showing up in competing frameworks like Ember and Angular.

This mini course is a gentle introduction to the most fundamental and practical parts of React. You’ll get an excellent, hands-on experience in building React components from the ground up.

In our second lesson, we’ll wrap up with a beautiful, functional, lap-counting stopwatch which you can build in just 30 minutes. Don’t believe me? I’ll prove it. React.js makes it easy to build interactive UIs with very little code. Get ready to build stateful UIs with React.js including state-management, conditional rendering, and capturing time.

Ready to dive into a full React course? Check out our course React The ES6 Way for a beginners course into React with ES6. If you’d like to learn ES6 first before starting our React course, check out Diving into ES2016. Next on your list is Forms with React and Redux, especially if you’re integrating forms in your next React app.

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • Learn React basics
  • Build a stopwatch with React
  • Closed captions available
Meet your instructor
Michael Chan

Michael is obsessed with teaching. He designs at Planning Center Online, organizes Full Stack Talks in San Diego, and teaches React.js at SitePoint. He thinks his wife and two ridiculous kids are super great. Also ramen.

Lesson 1: React Tips
Getting Started with React 5:35
Introducing the One-Way Data Flow with React 5:15
Using Props to Pass Data in React 5:13
An Introduction to Component States in React 5:13
Understanding React Events 4:56
Controlled Components vs Uncontrolled Components in React 5:37
Using map() to Create Lists in React 5:22
Using Webpack to Transform JSX 8:10
Lesson 2: Building a Stopwatch with React
Capturing Time 8:31
Conditional Rendering 4:50
Adding a Lap Logger 7:10
Using className to Add Style 7:18

Leave a Review