It's time to learn modern React (with Hooks) the right way

Learn modern React from scratch, and practice in an intuitive environment. Throughout this course, you will build an online supermarket shopping app with Stripe integration.

To make that possible, you will read short lessons, solve challenges and projects while learning the best practices, one step at a time. Try the first 67 lessons, challenges & flashcards for free. You can upgrade to a Pro account with a one-time payment that gives you access for 5 years.

React Tutorial is suitable for developers with JavaScript experience. Not comfortable with JavaScript? Check out Learn JavaScript

What you will learn

This course covers React in 2021 from scratch. We've got a unique approach as we like to dive into the details so that you can fully understand how React works.

The lessons & challenges will guide you through these topics step by step while building the online supermarket shopping app.

  • React.createElement
  • JSX
  • Advanced JSX
  • ReactDOM
  • Elements
  • Components
  • Functional Components
  • Props
  • State
  • Hooks
  • Destructuring
  • UI Kit
  • DOM Events
  • Pure functions
  • Closures
  • Events
  • JSX Advanced
  • Advanced Array destructuring
  • Conditional state changes
  • Conditional rendering
  • Immutability
  • Array immutability
  • State with Arrays
  • Object immutability
  • State with Objects
  • Accessibility
  • Lazy loading
  • Intro to testing
  • Intro to redux
  • React Dev Tools
  • Forms
  • Class Components
  • Functional state updates
  • Effect hook
  • Component lifecycle
  • Mapbox integration
  • Effect & State
  • Effect, State & Events
  • Advanced State
  • Advanced Mapbox integration
  • Effect performance
  • Storing to localStorage
  • Using APIs & fetch
  • Advanced Hooks
  • Write your own hooks
  • useFetch hook
  • Context Provider
  • Stripe integration
  • React Router
  • Create React App
  • Deploying React apps
  • Folder structure
  • Custom Events
  • Lifting state up
  • Virtual DOM
  • React Lazy
  • Preact
  • Intro to react-redux
React flashcards

Learn on the go

Keep your memory refreshed and use the React Flashcards app to do some exercises on the go. The app will be available to you for free as soon as you complete the first 2 chapters!

The app uses spaced repetition to reinforce the concepts you learned. Spaced repetition has been proven to be a more effective learning method.

What people are saying

I've subscribed to a few other React courses online. But nothing compares to this one. Able to easily understand. Course is detailed yet crisp, well structured, and nicely organized. Initial explanations of a concept, followed by Exercises & Projects along with a recap of the chapter is the right mix. React was considered a complex subject by many, but not anymore. - Arun

Jad's React course builds off of the already solid Learn Javascript platform to create a straight forward way to learn React. Concepts are carefully explained and put into practice in a self-contained learning environment. And on top of all of that, there are mobile flashcards to reinforce lessons, an active community for support, and many more bits and pieces that make it special. It's a great experience from beginning to end and I hope it continues forward on other topics. - consolecmnd

Jad’s a fantastic teacher. This React course is another perfect example of that. Bite-sized learning which is concise and in-depth where it matters. The content is wonderfully written, with awesome examples, analogies, and challenges. The course personifies his great understanding of how people learn. If you’re looking to get started with react, look no further! Arjun

What’s great about this React course is the smooth UI and tests that back up your written code. It’s seemingly easy to switch between different files but also through all the well explained exercises and lectures. From the console to the editor, this is probably the first course (at least to my knowledge) that doesn’t require anything but a browser and a.. well computer. It’s superb! - @Bob

About the instructor

Jad Joubran

Jad is a Google Developer Expert, Microsoft Most Valuable Professional and Freelance Web Consultant based in Amsterdam.

He's on a mission to inspire developers around the world by regularly speaking at international conferences.

His passion for JavaScript led him to create the most interactive & step by step JavaScript & React courses where he teaches modern & advanced concepts for beginners.

Why Learn React through this course?

  • Read concise lessons
  • Solve interactive challenges
  • Recap concepts with flashcards
  • Get hints when stuck
  • Build a real app, step by step
  • Ask questions when stuck
  • Certificate of completion
  • Saves notes in lessons
  • Preview your notes
  • Export/Print your notes
  • Practical examples & use cases
  • Get help from the course creator
  • Unlock achievements
  • View official solution