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

50% Off, Sign Up Now!
After doing Wes Bos’ ‘React for beginners’ course I wanted to continue developing my React Skills and this workshop was the perfect follow-up!
Find out exactly what you will build inside of the course.
Intermediate and advanced React developers, this is for you:)
Some of the questions answered in this course.
Take your JavaScript skills to the next level.
The React Workshop is a perfect follow-up to React 101, if you liked it you will love this workshop.
Is this for you?
What will you learn?
What do you need before start?
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.
Mastering React will open endless possibilities for your new client project and your next career move.
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.
18 HD videos, 2hr 33min
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 |
16 HD videos, 2hr 22min
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 |
44 HD videos, 6hr 30min
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.
Select your package.
Build 1 interactive project.
$137
$67
Build 3 interactive projects.
$201
$117
Best Value
React Workshop + GreenSock Combo
$425
$167
50% Off, Sign Up Now!
$117.00 $58.00
All prices in USD
Price in USD, One-Off Payment, Instant Access
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.
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.
Yes, you need to have some basic React and modern JavaScript knowledge. I recommend going through my React 101 course first.
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.
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.
For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.
Here is what others think
about this React tutorials.
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!
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!
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.
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.
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.
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.
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
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.
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.
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.
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!
Excellent course! Insightful, detailed and concise. Highly recommend. Cannot wait for another 😉
I’m so happy to have found this course! Petr is excellent!
♥
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?