After doing Wes Bos’ ‘React for beginners’ course I wanted to continue developing my React Skills and this workshop was the perfect follow-up!
Arden de Raaij
Arden de Raaij
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.
Arden 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:)
What You Will Learn in this Course
Some of the questions answered in this course.
- 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.
- 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.
- 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.
Did you like React 101?
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.
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!
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.
Table of Content - Property Listings
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 |
Table of Content - ABC Quiz
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 |
Table of Content - Head To Head
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.
Amit Erandole
Course Packages
Select your package.
One Project
Build 1 interactive project.
$137
$97
- 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
- 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.
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 😉
♥
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?