React Workshop

Overwhelmed by React? Don't Know How to Connect the Dots and Build Something Bigger than a To Do List?

Learn how to build 3 advanced React projects from scratch using React Router, TypeScript and Mobx.

After doing Wes Bos’ ‘React for beginners’ course I wanted to continue developing my React Skills and this workshop was the perfect follow-up!

5 starsArden de Raaij

Watch The Course Preview

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

Target Audience

Intermediate and advanced React developers, this is for you:)

React 101 target audience - advanced beginners to intermediate

What You Will Learn in this Course

Some of the questions answered in this course.

Advanced React Tutorials

  • How to use React with Google Maps API.
  • How to filter data based on multiple criteria.
  • How to render custom markers and more.
  • How to scroll to the right element and more.

Live Demo

Advanced React Tutorials

  • How to use CSS transitions to create a better user experience.
  • How to load data using Fetch API.
  • How to keep your state under control.
  • How to use the right lifecycle methods.

Live Demo

Advanced React Tutorials

  • How to use higher order components.
  • How to use MOBX to manage your application state.
  • How to use Firebase to store data in real time.
  • How to manage more complex data in your app.

Live Demo

Did you like React 101?

Take your JavaScript skills to the next level.

Advanced React Tutorials for Professional Developers

The React Workshop is a perfect follow-up to React 101, if you liked it you will love this workshop.

Intended Audience

Is this for you?

  • Anyone with a working knowledge of HTML5 and CSS3.
  • Anyone with some JavaScript and React experience.
  • Professional front-end developers trying to learn what’s hot and boost their skill set.
  • Anyone who ever tried to use React and found it too overwhelming.

Objectives

What will you learn?

  • Explain React API by building practical demos step by step.
  • Build 3 advanced projects from start to finish.
  • Learn how to manage data in more advanced applications.
  • Learn by doing, follow Petr step by step, line by line.

Prerequisites

What do you need before start?

  • I highly recommend using VSCode and follow me step by step.
  • All working files are available for download.
  • Positive attitude towards learning new techniques.
  • A genuine interest in React and the modern JavaScript eco-system.
  • Tomato lovers more than welcome!

Petr Tichy - Ihatetomatoes.net

I have been using React on many commercial projects for a while. It is a perfect library for dynamic, interactive UI and most importantly it is the best library for a fast user experience.

React.js

Mastering React will open endless possibilities for your new client project and your next career move.

100% Money Back Guarantee

Watch the first 5 course videos and if you are not completely satisfied, you can enjoy my 14 days 100% money back guarantee. Simply contact me for a prompt refund.

Table of Content - Property Listings

18 HD videos, 2hr 33min

Advanced React Tutorials

Module 1 Property Listings
Learn how to build a Google Map component using React.js.
Unit 1 RW – Map – #1 – Introduction and setup – 5:02
Unit 2 RW – Map – #2 – Properties Card Component – 7:30
Unit 3 RW – Map – #3 – Card details rendering – 7:17
Unit 4 RW – Map – #4 – GoogleMap component – 10:27
Unit 5 RW – Map – #5 – Rendering dynamic markers – 10:49
Unit 6 RW – Map – #6 – Scroll and info windows – 11:35
Unit 7 RW – Map – #7 – Prevent scroll – 8:12
Unit 8 RW – Map – #8 – Binding This – 4:45
Unit 9 RW – Map – #9 – Header and Filter components – 12:38
Unit 10 RW – Map – #10 – Filter Bedrooms – 6:49
Module 2 Advanced Filtering
Learn how to filter data using React.js and pure JavaScript.
Unit 1 RW – Map – #11 – setState Callback function – 9:50
Unit 2 RW – Map – #12 – New filteredProperties array – 5:22
Unit 3 RW – Map – #13 – Updating Google Map – 8:02
Unit 4 RW – Map – #14 – Filtering by bathrooms – 5:50
Unit 5 RW – Map – #15 – Clearing filter – 7:34
Unit 6 RW – Map – #16 – Empty state and bug fixing – 9:32
Unit 7 RW – Map – #17 – Sorting order – 12:14
Unit 8 RW – Map – #18 – Filtering by price – 9:39

Table of Content - ABC Quiz

16 HD videos, 2hr 22min

Advanced React Tutorials

Module 1 Quiz
Learn how to build an interactive ABC Quiz with React.js.
Unit 1 RW – Quiz – #1 – Introduction and setup – 6:04
Unit 2 RW – Quiz – #2 – Question Component – 7:49
Unit 3 RW – Quiz – #3 – Choices and NiceButton – 9:40
Unit 4 RW – Quiz – #4 – Selecting Answer – 9:41
Unit 5 RW – Quiz – #5 – Go to the next question – 9:40
Unit 6 RW – Quiz – #6 – Show next question – 9:23
Unit 7 RW – Quiz – #7 – Results and Answers components – 10:47
Unit 8 RW – Quiz – #8 – List answers before submission – 4:27
Unit 9 RW – Quiz – #9 – Fetching correct answers – 9:15
Unit 10 RW – Quiz – #10 – Show correct answers – 11:08
Unit 11 RW – Quiz – #11 – Progress bar – 7:03
Unit 12 RW – Quiz – #12 – Navigation arrows – 9:38
Unit 13 RW – Quiz – #13 – Arrows functionality – 11:39
Unit 14 RW – Quiz – #14 – Overwrite existing answers – 10:55
Unit 15 RW – Quiz – #15 – Final tweaks – 12:49
Unit 16 RW – Quiz – #16 – Sharing Icons – 1:58

Table of Content - Head To Head

44 HD videos, 6hr 30min

Advanced React Tutorials

Module 1 Project Setup
Introduction to TypeScript, Eslint and Mobx. (47min)
Unit 1 RW – HTH – #1 – What is TypeScript? – 6:03
Unit 2 RW – HTH – #2 – TypeScript Installation – 11:15
Unit 3 RW – HTH – #3 – ESlint Installation – 9:14
Unit 4 RW – HTH – #4 – What is Mobx? – 5:48
Unit 5 RW – HTH – #5 – Mobx Installation – 11:45
Unit 6 RW – HTH – #6 – ESlint CLI configuration – 2:52
Module 2 Routes and Login
Setup all routes and login functionality. (1hr 26min)
Unit 1 RW – HTH – #7 – Introduction and setup – 8:55
Unit 2 RW – HTH – #8 – React Router and Routes – 8:03
Unit 3 RW – HTH – #9 – Create Mobx ViewStore and pass it down – 10:10
Unit 4 RW – HTH – #10 – Loader and login form – 12:13
Unit 5 RW – HTH – #11 – Firebase project setup – 04:37
Unit 6 RW – HTH – #12 – Log existing user to Firebase – 11:42
Unit 7 RW – HTH – #13 – Updating ViewStore, Mobx DevTools – 12:17
Unit 8 RW – HTH – #14 – Logout user from Firebase – 08:41
Unit 9 RW – HTH – #15 – Simplifying all import statements – 09:27
Module 3 CRUD Players
Functionality to create, read, update and delete players. (1hr)
Unit 1 RW – HTH – #16 – Data structure overview – 04:32
Unit 2 RW – HTH – #17 – Make App.tsx an observer – 07:39
Unit 3 RW – HTH – #18 – AddPlayerForm and @inject – 13:21
Unit 4 RW – HTH – #19 – Add players to Firebase (Create) – 06:49
Unit 5 RW – HTH – #20 – Read players from Firebase (Read) – 12:52
Unit 6 RW – HTH – #21 – Update players in Firebase (Update) – 09:37
Unit 7 RW – HTH – #22 – Remove players from Firebase (Delete) – 05:45
Unit 8 RW – HTH – #23 – Firebase CRUD Challenge – 02:40
Module 4 CRUD Head To Heads
Functionality to create, read, update and delete head to heads. (33min)
Unit 1 RW – HTH – #24 – Add head to head to Firebase (Create) – 08:49
Unit 2 RW – HTH – #25 – Read head to heads from Firebase (Read) – 11:17
Unit 3 RW – HTH – #26 – Update and Remove HTH from Firebase (Update, Delete) – 13:27
Module 5 CRUD Games
Functionality to create, read, update and delete games. Linking games with other application data. (1hr)
Unit 1 RW – HTH – #27 – Selected Head To Head – 07:50
Unit 2 RW – HTH – #28 – Update AddGameForm – 11:15
Unit 3 RW – HTH – #29 – Create dynamic dropdown for HTH – 07:53
Unit 4 RW – HTH – #30 – Add game to a related HTH and FB – 07:29
Unit 5 RW – HTH – #31 – Get winner and send it to FB – 09:48
Unit 6 RW – HTH – #32 – Read, update, delete games from FB – 13:54
Module 6 Advanced Functionality
More advanced functionality to complete all the routes and rendering of all components (67min)
Unit 1 RW – HTH – #33 – Protecting some of the Routes – 08:52
Unit 2 RW – HTH – #34 – All Component – 09:49
Unit 3 RW – HTH – #35 – Head To Head details view and route – 13:53
Unit 4 RW – HTH – #36 – Dynamic Head To Head content – 08:41
Unit 5 RW – HTH – #37 – Games with classNames – 09:42
Unit 6 RW – HTH – #38 – Show all games – 08:18
Unit 7 RW – HTH – #39 – Fetch single head to head – 08:04
Module 7 Final Tweaks
Final tweaks and code refactoring (50min)
Unit 1 RW – HTH – #40 – Fine-tune Head To Head Details – 11:04
Unit 2 RW – HTH – #41 – Update total score when adding or removing a game – 14:06
Unit 3 RW – HTH – #42 – Prevent deleting all used players – 06:29
Unit 4 RW – HTH – #43 – Remove all games associated with a deleted HTH – 04:44
Unit 5 RW – HTH – #44 – Update Firebase security rules – 10:47
Unit 6 RW – HTH – #45 – What’s next? – 02:09

I would highly recommend it if you are done with the basics of React and looking to upgrade your skills with a complex real world portfolio project.

5 starsAmit Erandole

Course Packages

Select your package.

One Project

Build 1 interactive project.

$137

$97

Go to store

  •  
  • Access to Property listings or
  • Access to ABC Quiz or
  • Access to Head To Head
  • Lifetime access
  • Stream from any device

React Workshop

Build 3 interactive projects.

$291

$167

  •  
  • Access to Property listings
  • Access to ABC Quiz
  • Access to Head To Head
  • Lifetime access
  • Stream from any device

Best Value

Master Combo

React Workshop + Animation Combo

$619

$297

Go to combo

  •  
  •  
  • Access to Animation Combo
  • Access to React Workshop
  • Lifetime access
  • Stream from any device

React Workshop

$167.00

All prices in USD

Price in USD, One-Off Payment, Instant Access

Have a few questions? No worries.

Can I upgrade to Master Combo from GreenSock or Animation Combo?

Yes, if you have purchased GreenSock or Animation Combo you can upgrade to Master Combo! Simply login and you should see the updated price at the checkout. If for any reason you don’t see the discounted price and you think that you are eligible, please get in touch.

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 my React 101 course 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 this React tutorials.

5 stars
By Dan Sacharow

I signed up because your free tutorials on youtube finally gave me the ‘eureka’ moment I needed to grasp modern JavaScript development.

I tried numerous others on Lynda.com and youtube and nothing stuck until I went through your playlists.

Purchasing this course was a win-win for me.

I learn, and I can offer support and remuneration for all of the hard work that went into your tutorials.

This course helped me land my first job working with React full time.

Invaluable! Keep it up.

Well worth the cost!

5 stars
By Arden de Raaij

After doing Wes Bos’ ‘React for beginners’ course I wanted to continue developing my React Skills and this workshop was the perfect follow-up!

The course has a great pace, you’ll build an interesting application with loads of real live uses and personally I was immediately inspired to start building some applications on my own based on what I’ve learned.

I’m genuinely happy I did this course and would recommend it to anyone looking to learn and get inspired with React!

5 stars
By Art Sir

Great Tutorials, Petr is very clear in his teaching.

Each project builds after the other. A lot of tutorials out there are outdated and give you a bunch of pieces.

Petr gives you complete professional projects. He shows you how to debug and offer challenges.

5 stars
By Eddie Solar

This is a great course for those wanting to up their skills on React.

The course uses a real world example and not another todo list.

The length of each video is perfect and enough information is provided.

I’m a father of five and the videos are long enough for me to learn, but also short enough that I don’t feel like I have to rush so I can get back to dad duties.

5 stars
By Amit Erandole

Gorgeous animations. Beautiful aesthetics. This is the rare React course that focuses on the small user interface details that other don’t.

The project is thorough and yet there is not a single moment of boredom. The pace is rapid and upbeat. Petr clarifies things in a succinct and economic fashion.

I would highly recommend it if you are done with the basics of React and looking to upgrade your skills with a complex real world portfolio project.

5 stars
By Sebastian Hewelt

I love Petr’s courses both here and on youtube.

His style of teaching makes it easy to learn new technologies, like React.

You can’t be lost, that’s what i value the most – all the new concepts and steps are thoroughly explained.

5 stars
By Jaroslav Horák

I really like this Petr’s advanced React course.

Many new things to learn. Great and interesting projects. I am looking forward to use the combination of React and Google maps from the first project in my own project!

I highly appreciate Peter’s pick of Mobx as state management instead of Redux (like another tutorials).

For me Mobx is so much easier to pick up and get my head around it.

Petr even include Typescript (although that’s not strictly a React thing).

I didn’t like it too much at start, but I started seeing benefits later on.

Damn you Petr! Because of this course I started to like Typescript =D

5 stars
By Trevor Kilvington

These tutorials are really good!

I knew a lot of react already but hadn’t really played with firebase before and I learned a lot.

If you are interested in either React or Firebase I would highly recommend Petr’s tutorials.

5 stars
By Nick Rice

What I love about Petr’ courses is the pace.

He delivers the content in a manner that is neither slow or fast, clearly articulating what and why.

I find Petr’ teachings to stay in mind when transferring this knowledge into my own projects compared to the other React courses I have completed.

I love how Petr shows the errors and then how to correct them. This is a key aspect to why I chose to purchase Petr’ React courses, on top of other React courses I have already completed.

5 stars
By Alex Innes

What I love about this course is how much it feels like a real world project.

Instead of focusing purely on repeating the basics and another to do list, Petr walks you through how you would use react as if you were in a studio, showing you what you would need to do to connect your app with an api or server like firebase.

It’s always been something I’ve been unsure on how to move forward and I feel like this has been a great help in my understanding of what react can really do.

5 stars
By Graeme Tilley

Another great workshop project!

Petr is very good at explaining what the code is doing and how we can achieve the results we are looking for.

Overall, Petr is very knowledgable and this was a fun project to create. Highly Recommend!

5 stars
By Davs Howard

Excellent course! Insightful, detailed and concise. Highly recommend. Cannot wait for another 😉


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?