React 101 - 2020 Update

Still overwhelmed by React, but keen to learn more?

Learn how to use React Hooks API! Course updated in 2020.

Jaroslav Horak

Nice transition from Petr’s courses about animation to React world. Fantastic work like always Petr.

5 stars

Jaroslav Horak
Fernanda Najah

Short videos where the explanations are not so fast, no too slow, 100% practical classes.

5 stars

Fernanda Najah
Mark Omarov

One of the most organized and structured courses for React I’d seen. 10 dead tomatoes out of 10.

5 stars

Mark Omarov

Watch The Course Preview

Find out exactly what you will learn inside of the course.

What You Will Learn in this Course

Some of the questions answered in this course.

React Tutorials

  • How to use useState() hook.
  • How to use useRef() to target DOM elements.
  • How to calculate height of DOM element.
React Tutorials

  • How to use Fetch API to load data for your app.
  • How to use useEffect React Hook.
  • How to create custom React Hook.
  • How to use styled components.
React Tutorials

  • How to filter through data.
  • How to render a dynamic dropdown.
  • How to convert values to a new selected currency.

Course Information

Is this for you?

  • Total class duration: 2hrs 15min
  • Video files not available for download.
  • Learn at your own pace.

Objectives

What will you learn?

  • How to build 3 practical components using React.js.
  • How to pass data through props and use setState.
  • How to use localStorage and more.

Prerequisites

What do you need before start?

  • Basic React knowledge, at least starting up Create React App.
  • Working knowledge of HTML5 and CSS3.
  • A genuine interest in React and modern JavaScript workflow.

Target Audience

Are you an advanced beginner? This is for you:)

React 101 target audience - advanced beginners to intermediate

Table of Content

HD videos explaining the basics of React.js!

Module 1 Collapsible Component (2020)
Unit 1 R101 - Project Setup - 3:14
Unit 2 R101 - Components Structure - 4:03
Unit 3 R101 - Styled Components - 7:06
Unit 4 R101 - useState - 6:35
Unit 5 R101 - useRef - 6:05
Module 2 Fetching Data (2020)
Unit 1 R101 - useEffect - 5:11
Unit 2 R101 - useEffect with fetch - 6:45
Unit 3 R101 - isLoading state - 8:58
Unit 4 R101 - Custom React Hook - 7:23
Unit 5 R101 - Export function from custom hook - 3:54
Module 3 Collapsible Component
Unit 1 R101 - #1 - Introduction and setup - 5:08
Unit 2 R101 - #2 - Passing children to React component - 5:27
Unit 3 R101 – #3 – Conditional class rendering - 6:08
Unit 4 R101 - #4 - Calculating height of an element - 6:04
Module 4 Fetching Data
Unit 1 R101 - Fetch - #1 - Creating the initial loading State - 8:14
Unit 2 R101 - Fetch - #2 - Using the Fetch API - 8:46
Unit 3 R101 - Fetch - #3 - How to use localStorage - 7:34
Unit 4 R101 - Fetch - #4 - Checking the time since a timestamp - 7:45
Module 5 Currency Converter
Unit 1 R101 – Currency – #1 – Loading data into state – 11:59
Unit 2 R101 - Converter - #2 - Filtering through data - 7:30
Unit 3 R101 - Converter - #3 - Conversion calculations - 10:47
Signup Now!

Free forever, Instant Access

Have a few questions? No worries.

Is this course up to date?

Modules 1 and 2 (60min) has been added to React 101 in May 2020 and cover React Hooks API. Modules 3,4 and 5 contain older React Tutorials. Feel free to skip them, but you might pick some other React tips there too.

Can I download the videos and watch them offline?

No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.

Do I need any React experience before signing up?

Yes, you need to have some basic React and modern JavaScript knowledge. I recommend going through the React Tutorials 2017 playlist on my YouTube channel first.

Why should I learn React.js instead of Angular.js or Vue.js?

React.js is used by some of the most popular online apps such as Facebook, Instagram or AirBnB. Knowing how to use React will open a whole new spectrum of possibilities for your own project or your next career move.

What software do I need to complete the workshop?

All you need is a code editor (I am using VSCode). You can download the starting files and follow me step-by-step from start to finish of each project.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you want to master React?

Here is what others think
about the React 101.

5 stars
By John S.

A really great course if you’re already somewhat familiar with React but want to reach the next level.

More up-to-date than most tutorials found on YouTube including how to use hooks and styled components effectively.

5 stars
By James Friedal

Learning React can be quite a daunting challenge. But React 101 is the perfect introduction.

Things just click. And then you’re away.

I’ve taken both React 101 and ‘React for Beginners by Wes Bos’ and in my opinion React 101 is a better introduction.

5 stars
By Beau Jackson

As with all of Petr’s tutorials, the code for this tutorial is very thoughtfully put together.

Great care is taken in order to step the learner through some difficult code. The lessons are NOT intimidating and surprisingly fun! And because they are fun you remember the essential principles taught!

I feel much more confident in react & feel prepared to take on larger projects without fear–thanks to these carefully crafted lessons.

This is what good teaching looks like.

Many thanks, Petr!

5 stars
By Joey Ng'ethe

Petr never disappoints! This course should get anyone from an advanced beginner to a pro of React. Thanks

5 stars
By Mary Radchuk

I didn’t expect this course to be so great!

Short time videos full of useful information, without any unnecessary husk, amazing! It’s worth the time!

5 stars
By Arock Kaspar

I have completed Module1 of React 101 so far. It is excellent. I really learnt a lot.

5 stars
By Eirin Gonzales

I love that you explained which lifecycle method will come first. Detailed and clear and simple. Real examples with techniques to write your code. Love it! Great course!

5 stars
By Mark Omarov

One of the most organized and structured courses for React I’d seen.

Clear voice and good quality tutorials.

Easy to follow and simple to understand, top React course.

Even if you don’t have much experience with React you will learn a lot from these real world examples.

10 dead tomatoes out of 10.

5 stars
By Dávid Lévai

Great course for everybody who wants a quick overview of React’s basic capabilities.

5 stars
By Fernanda Najah

Petr is THE BEST teacher!

Short videos where the explanations are not so fast, no too slow, 100% practical classes.

I’m a beginner and searched a lot of resources to learn React, and with Petr I’m finally really learning! =)

5 stars
By Santino Valenzuela

Petr is a great teacher.

He is very knowledgeable and available for help when you need assistance.

I have gone through other React tutorials but this one has by far the best explanations and demos.

What sets this React tutorial apart from others is that not only its easy to understand while following along, it includes a Bootstrap CSS framework which I always use to build responsive websites quickly.

HIGHLY RECOMMEND this course for those looking to learn ReactJS.

Consider watching his Webpack 2 and React Tutorials on his YouTube channel as well. This will help you transition quickly into learning this course.

5 stars
By Fern Plant

May be fast for someone’s first tutorial, but if you’ve looked at React before, this is awesome!

Petr tells you what he’s doing and gives good brief descriptions as to what is going on.

Awesome course! Great work. I like the last video on how he recommends we try it ourselves first.

5 stars
By Jaroslav Horák

Nice transition (get it? TRANSITION hehe) from Petr’s tutorials about web animation to React world.

Petr cleverly put all the dull (but necessary) stuff about React environment setting on his Youtube channel and make this course purely about React.

It is great course for beginners. I really enjoyed it. Fantastic work like always Petr!

5 stars
By Joel Bews

If you are sick of making TODO apps this is the Course for you.

The example apps have a real world feel.

Everything is well explained from the React concepts through to the tools used. This is an outstanding course.

5 stars
By Max Diamond

Incredible tutorial on how to use hooks with React. This course finally made it click with me. And it’s very nice that there’s some styling sprinkled in too!

5 stars
By Donia Canaveral

I’ve never looked at React before this course, so it was a tad bit fast for me, BUT Petr is an excellent teacher and I understood every concept he went through.

I will definitely be going through the tutorials on his YouTube channel to learn more! Thank you Petr!

5 stars
By Tan Nguyen

I am a fresher full-stack web developer. This course is very clear and suitable for me. Hope you can make more courses like this!

5 stars
By Nikhil Karkra

Excellent work 🙂

5 stars
By Tim Fetter

I’m a newb to React and being able to hear how Petr talks through his code helps me to understand it better as he moves through the app.

I feel like it was time that was well spent going through this course.

Thanks Petr! Have you tried campari tomatoes? They’re wonderful! 🙂

5 stars
By John Dcosta

It’s a great tutorial. Explained things very well even the beginners will be able to start from scratch and run with it.

Love the way things are explained.

5 stars
By Jim Patton

Thank you, Petr. These tutorials were very insightful and simple to follow.

5 stars
By Md. Atiquzzaman Soikat

Excellent course. Everything explained very well. Recommended for anyone learning react. There are’t many React.js courses with examples like this one. Thanks Petr for this amazing course.

5 stars
By Anthony Devine

Great intro into building with React. Looking forward to the React workshop being available.

5 stars
By Jean-Claude Kamenyero

This is by far the best tutorial on React I’ve seen.

I especially enjoyed the pace and the clear explanations.

Highly recommended !!!

Great job Petr and I will surely be checking out the workshop.

5 stars
By Manoj Kumar

I liked it too much. The fundamentals of React are cleared for me. I am waiting for React Workshop. Thank you.

5 stars
By Andrew Davis

Excellent

5 stars
By Angelo Rubin

Sorry my english is very poor, but your course is awesome! Thanks.

4 stars
By Yannick Lyn Fatt

The course has been good. I like that it’s been broken up into small manageable chunks.

5 stars
By Asep Capuy

Petr thanks! Great course, simple to learn, your step by step approach is very functional.

It isn’t only a tutorial, it’s a full immersion in the working method of an amazing front-end designer!

5 stars
By Teo Kokos

Awesome! Keep up the good work!

5 stars
By Alina Tudose

I loved this course. Peter explains really well everything that he is doing and at the right pace (not too slow, but not foo fast either).

The materials were also very helpful. I feel now enabled to work on something on my own 🙂 Thanks!

5 stars
By Mateusz Bodzioch

I already have a bit of experience with React.js anyway I highly recommend! This is a great way to start or reboot the basics.

5 stars
By Franck Dev

This tutorial is unique. Petr knows how to lead you step by step in React learning. Thanks!

5 stars
By Phat Chin

I love these tutorials, practical and up-to-date.

5 stars
By George Worthington

Good videos, I just finished a full-stack boot camp with JavaScript/React and this was good review prior to jumping into the advanced React Workshop.

5 stars
By Damion C

This is a really helpful React tutorial. I feel like I’m learning so much faster than reading something and it’s project based so that always helps. Thank you.


Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?