React - Property Listings

Learn how to build an interactive map with property listings from scratch using React.js and Google Maps API.

2.5 hrs of advanced React tutorials for professionals.

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

React Workshop Preview

Find out exactly what you will build
in the Property Listings project.

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.
Advanced React Tutorials

  • Highlight active property in the list and on the map.
  • Render custom markers based on a property location.
  • How to keep your state under control.
Advanced React Tutorials

  • How to sort cards by price.
  • Instantly update visible cards and markers on the map.
  • Scroll to a related card in the list view.

Did you like React 101?

Take your JavaScript skills to the next level.

Advanced React Tutorials for Professional Developers

This project is a perfect follow-up to React 101, if you liked it you will love this project too.

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 demo step by step.
  • Build 1 advanced project from start to finish.
  • Learn how to manage data in more advanced application.
  • 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 of advanced React tutorials, 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

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.

Property Listings

Build 1 interactive project.

$137

$97

  •  
  •  
  • Access to Property listings
  • Lifetime access
  • Stream from any device

Most Popular

React Workshop

Build 3 interactive projects.

$291

$167

Go to workshop

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

Master Combo

React Workshop + Animation Combo

$619

$297

Go to combo

  • Lifetime access
  • Access to Animation Combo
  • Access to React Workshop
  • VIP discount on my future courses
  • Stream from any device

React – Property Listings

$97.00

All prices in USD

Price in USD, One-Off Payment, Instant Access

Have a few questions? No worries.

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 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 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 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 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 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.

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?