React from Basics to Real World Projects
4.3 (7 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,636 students enrolled

React from Basics to Real World Projects

Learn React Fundamentals and Build Your Real World App
4.3 (7 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,636 students enrolled
Created by Adrian Bienias
Last updated 11/2018
English [Auto]
Current price: $20.99 Original price: $29.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • All React main concepts
  • Build a real world application using React and public WordPress API
  • Create a simple boilerplate for all your further React based apps
  • Use external libraries like React Router
  • Bundle Your code with Parcel - zero-configuration web app bundler
  • Use fetch() for sending requests to API
  • Deploy your app to GitHub Pages and set up your own domain
  • Use Bootstrap theme for your React app
Course content
Expand all 26 lectures 09:24:52
+ React Basics
15 lectures 05:28:04
Updating DOM
Props & destructuring
Component lifecycle
Handling events
Forms - uncontrolled components
Forms - controlled components
Lifting state up & updating parent state
Bundling with Parcel
Fetching data (ajax request)
React router

Test what you've learned in this section

7 questions
+ Real World React App
11 lectures 03:56:48
Clean Blog Bootstrap theme
19:34 public api
Creating components
Fetching posts
Improving content component
Single post page
Dynamic header
Static pages
Helpers and config files
Deploy to GitHub pages
  • You need to know basics of JavaScript like how to declare a variable or function, what are if statements and so on.

Do you want to start using React but you're not sure if React is just enough for your needs?

Probably you've heard also about Angular and Vue, so you may asking yourself:

Which one should I choose?

Before I've learned React I had a doubt - what I should bet on? Maybe Angular is better. Or maybe Vue?

I knew AngularJS already (first version of Angular) and I was afraid that Google (which developed Angular) may completely change it in the future.

That's what happened with Angular 2. It was developed as something completely different and incompatible to Angular 1.

React has now 16th major version number and still sticks to the core concept.

Learning curve is also much easier for React comparing to Angular. Angular is written in TypeScript so you should learn it before learning Angular.

But what about Vue? It was clear for me that between React and Angular I will choose React. But there was also a third big player on the front-end development field - Vue.

Its learning curve is similar to React. Like React, Vue main concept is also much simpler comparing to Angular.

But React is developed by Facebook. They use it on Facebook. If they developed something which successfully work for billion dollar website, I guess it should also works as good for my projects. And as a bonus React has something additional to offer: React Native.

If you want to build native mobile applications React Native is all you need. It has similar syntax and workflow so using it comes with ease when you already know React.

There's also a job market. Comparing to competitors (Angular and Vue), React has the most job offers available around the world. China is an exception. If you want to get job in China, choose Vue.

So after considering all pros and cons I've bet on React. And now you know why.

What about Redux?

When it comes to using React people often hear/read about Redux. There's also a Flux, Mobx and they all designed for the same job: to manage your application state. But you don't need to use them with React. They're standalone projects working well with vanilla JavaScript.

Using React you will build a lot of components. Every (even tiny) element from your website (e.g. navbar, sidebar, newsletter form) could be an independent component. All of your components can manage their own state.

Navbar, for example, can store a login user status and show "log in" or "log out" depends on its state.

If you want to share that state with other component like newsletter form you need to move the state to closest common ancestor of that two components.

Then the state of login user status will be stored in e.g. parent page component. Navbar and newsletter will be placed as children components.

Moving that state from one component to another is not a big deal and you will learn how to do that in this course.

But if you want to share a dozens of states with dozens of unrelated components then some state manager might help.

Latest React version has already implemented feature called Context, which can be used instead of Redux, which is a good news.

Even better is that you might don't need at all a state manager unless you build a real huge and complex application.

And what's most important - don't overwhelm yourself. Learn one concept at a time.

Ask yourself: would you learn riding a bicycle and juggling at the same time?

It's much more effective to master riding bike at first, then learn juggling as an another independent skill.

Mixing skills you already know comes much easier than trying to learn multiple new things at the same time.

What about other libraries?

You need some solution to use different URLs for your pages and an easy way to navigate through them. React doesn't solve this problem out of the box.

So in my opinion there's only one additional library which is vital for React web applications. It's React Router.

Of course you can create your own router but it would take a lot of time and effort and ultimately you would reinvent the wheel.

In this course you will learn how to use React Router to create a complex navigation system for your app.

There's also another thing you will definitely need in your app. It's the ability of sending http requests.

There are ready to use external libraries like Axios, Request or event jQuery $.ajax which do the job. But in this course we will use something even better - native JavaScript solution - fetch API.

Because why use some additional library (which will slow down loading your app), when all modern browsers have already implemented interface for the same job?

If you want to support old Internet Explorer (which is no longer supported even by Microsoft) then yeah, you should stick with AJAX requests (but there's also a native JavaScript solution for that). Otherwise use fetch.

Why this course?

I've been in your shoes. I've struggled while learning React. Probably you have the same questions in your head which I had when I was trying to start using React.

So I've decided to make this React learning curve as easy as pie for you. You will get explanations to all gotchas you can face with while building React app.

With my little help you will be placed instantly in the middle of an action. You will see how to start using React within seconds with your every HTML project.

First you will learn using React with local html file (without running a server). The whole concept, almost every React feature will be explained to you before you will get your hands dirty with real world projects.

Next you will use a no configuration web application bundler - Parcel. It will run for you a localhost server and bundle your React project for development or production.

At the end of the day you will deploy your real world application (a blog) to GitHub pages. Of course you will be able to run it on whatever hosting you want simply by uploading your html, js and css files.

You will also learn how to use wordpress(dot)com service as a free serverless back-end for your React app.

Basically you will create whatever content you want in WordPress. Next you'll fetch that data via public API and you will be able to use it in your React app.

Free and accessible from the internet, live React website. This is what you will end up with at the end of this course.

Ready to start your adventure with React?

If so, just ENROLL NOW.

Who this course is for:
  • JavaScript developers looking for easier way to build user interfaces
  • Web developers wanting to start using React in their projects
  • Beginner React developers struggling with creating real world apps