React JS - Build real world JS apps & deploy on cloud
4.6 (185 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,159 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React JS - Build real world JS apps & deploy on cloud to your Wishlist.

Add to Wishlist

React JS - Build real world JS apps & deploy on cloud

React JS is an awesome JS Framework for building Frontend Applications! React JS is leading over Angular JS or Vue JS
4.6 (185 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,159 students enrolled
Created by Abhay Talreja
Last updated 4/2017
English
Learn Fest Sale
Current price: $10 Original price: $175 Discount: 94% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 22 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • You will go all the way from React js beginner to advanced React js developer.
  • You will gain a deep and true understanding of how React js works behind the scenes.
  • You will be able to debug your code and understand other developer's code.
  • You will be able to design faster websites using React Js
  • You will be ready to get started to learn React-Native
  • You will know how to access the React Library
  • You will know how to write JSX syntax
  • You will know all about a react component, properties, state and mounting of the components
  • You will know how to handle events in React
  • You will know how to access the React DOM Library
  • You will be able to build 4 real world apps along with me, all resources, code and help provided
  • You will be able to deploy all the apps to the cloud and share with me, other students and your friends your resume, built with React.
View Curriculum
Requirements
  • Working knowledge of HTML
  • Working knowledge of CSS
  • Working knowledge of JavaScript - you can also take my Javascript course for beginners.
  • Passion to learn!
Description

*** Brand New Course Launched in February 2017 (updated February 23, 2017) *** 

*** Learn React by creating many examples and 4 real world apps ***

What students are saying?

⭐⭐⭐⭐⭐ 
I believe this course will help “future proof” my coding abilities. I recommend this course. I had a JavaScript “lower intermediate” level of experience before taking this course. The instructor is prompt, interactive, very kind & really knows his %#&@ !!!

-- Michael Rooney

⭐⭐⭐⭐⭐ 
Abhay is truly an amazing teacher! He goes through everything you need to know about React and leaves you confident with using the framework. I highly recommend taking this course, you won’t regret it. Best course out there!

-- Uroosa Shah

Do you want to learn the number #1 programming language that is powering awesome User Interfaces of the internet?

Are you tired of wasting your time and money on random youtube videos or React courses that are either too simple, or too difficult to follow?

Or do you struggle to deeply understand and use React in real projects?

Or are you someone who is curious to know and learn React.js?

If your answer is a big YES... Then this is exactly the course you are looking for!

Remember - 

There is no formation without repetition!

...

So what is the course about?

This is a truly complete React Js course, that goes way beyond what other React courses out there teach you. 

I will take you from a complete React js beginner to an advanced developer. You will not just learn the React itself, you will also learn how to program. How to solve problems. How to structure and organize code using common standards/patterns.

Come with me on a journey with the goal of truly understanding the React JS. And I explain everything on the way with great detail!

You will learn "why" something works in React, not just "how". Because in the modern JavaScript world of today, you need more than just knowing how something works. You need to debug code, you need to understand code, you need to be able to think about code.

So, by the end of the course, you will be a capable React developer, able to write, understand and debug JavaScript code using all the powerful features the language offers to us. You will be able to code your application using React js.

...

Here is exactly what we cover in this course:

• All the React JS and programming fundamentals: What is React? Who uses it? Adding React to your site.

• Everything you need to know in order to gain a deep understanding of how JavaScript works behind the scenes: React components, properties, state and parent/child relationship within React and more..

• How to make React code interact with webpages: DOM manipulation. Learn how to select and change webpage elements, create new elements and handle DOM events. Accessing React DOM.

...

Let's now find out if this course is for you. It's a perfect fit if...

Student #1: You want to gain a deep understanding of the most popular programming front-end library in the world: React.js.

Student #2: You have taken other React.js courses but: 1) still don't really understand React, or 2) still don't feel confident to code real-world apps. This course is perfect for you!

Student #3: You are interested in using React and React-Native in your application to make it cross-platform, but don't know where to start.

Student #4: You want to get started with programming in general in the Javascript world. React.js is a great language to learn how to code the latest in the programming world.

...

Now it's your turn to decide. This is what you get:

• Lifetime access to my HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable starter code and final code for each section.

• My personal support in the course Q&A.

Sounds great? Then start learning today by clicking the “Take this course" button right now, and join me in the only React.js course that you will ever need!

...

What are the requirements?

  • Anyone who has working knowledge of HTML
  • Anyone who has working knowledge of CSS
  • Anyone who has working knowledge of JavaScript - you can also take my Javascript course for beginners.
  • Aspiring web developers. Passion to learn!

What am I going to get from this course?

  • Lifetime access to my HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.
  • You will go all the way from React js beginner to advanced React js developer.
  • You will gain a deep and true understanding of how React js works behind the scenes.
  • You will be able to debug your code and understand other developer's code.
  • You will get my personal support in the Q&A.


What is the target audience?

  • You should take this course now if you want to gain a deep understanding of the most popular programming front-end library in the world: React.js.
  • You should take this course now if you have taken other React.js courses but: 1) still don't really understand React, or 2) still don't feel confident to code real-world apps. This course is perfect for you!
  • You should take this course now if you are interested in using React and React-Native in your application to make it cross-platform, but don't know where to start.
  • You should take this course now if you want to get started with programming in general in the Javascript world. React.js is a great language to learn how to code the latest in the programming world.
  • You should take this course now if you have to prepare for an interview on React JS. This course will help you get up to speed faster than most other articles/videos you will find on the internet.
  • Do NOT take this course if you just want to use React but don't want to know how it actually works. Trust me, I have been there!
Who is the target audience?
  • You should take this course now if you want to gain a deep understanding of the most popular programming front-end library in the world: React.js.
  • You should take this course now if you have taken other React.js courses but: 1) still don't really understand React, or 2) still don't feel confident to code real-world apps. This course is perfect for you!
  • You should take this course now if you are interested in using React and React-Native in your application to make it cross-platform, but don't know where to start.
  • You should take this course now if you want to get started with programming in general in the Javascript world. React.js is a great language to learn how to code the latest in the programming world.
  • You should take this course now if you have to prepare for an interview on React JS. This course will help you get up to speed faster than most other articles/videos you will find on the internet.
  • Do NOT take this course if you just want to use React but don't want to know how it actually works. Trust me, I have been there!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 53 Lectures Collapse All 53 Lectures 08:16:39
+
Introduction
4 Lectures 21:41

In this lecture, we will use React JS into our online editor "codepen.io" and create our very first "Hello World" application!

Preview 05:37

In this lecture, we will expand on our "Hello World" application and add more functionality to it.

Preview 05:52

In this lecture, we will see the course structure and see the topics that are going to be covered!

Preview 04:55

In this lecture, I will explain you on how to make the most of the course and how to use the material provided!

Preview 05:17
+
Overview and Installation
4 Lectures 23:28

In this lecture, I will give you a brief overview of React JS, it's PROs and Limitations!

Overview
08:47

In this lecture, I will showcase, some of the apps that I have designed using React JS

Showcase
02:13

In this lecture, We will install our armor! Sublime Text (you can also use an editor of your choice), Node JS and NPM.

Installation - Sublime Text, Node.js and Npm
04:09

In this lecture, we will continue the installations and install React JS and setup our workspace!

Installing React JS and Setting up the workspace
08:19
+
The Basics
13 Lectures 02:26:07

In this lecture, we will understand and use JSX to write our React application!

Understanding JSX
09:03

In this lecture, we will understand and use Components to write our React application!

Components - State and Stateless
12:26

In this lecture, we will understand rendering and how to use the React DOM to render/update components!

Rendering
13:59

In this lecture, we will go over the props in React JS and how data flows from Parent to Child (FLUX)

Understanding Props
05:25

In this lecture, we will expand our discussion and see how to add validations to props!

Prop Validations
11:36

In this lecture, we will go the components API and see all the supported methods/functions!

Components API
16:47

In this lecture, we will go the components API and see all the supported methods/functions on how to call them and when they get called.

Components Life Cycle
14:48

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 1
10:29

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 2
10:02

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 3
10:32

In this lecture, we will understand Routing in React as well use the react-router plugin/library!

React Router - Part 1
15:43

In this lecture, we will understand Routing in React as well use the react-router plugin/library!

React Router - Part 2
06:43

Some of the students started facing issues with the react router installation. React Router got updated to version 5.0.0 - So here is how you will install it. See the resources for the links.

[new] - React Router 4.0 installation and Docs
08:34
+
Project - Game
9 Lectures 01:15:28

In this lecture, we will create our very first React Application! - I will give you an overview of the game!

Preview 01:31

In this lecture, we will create our first set of HTML components and get the static part of the game completed!

Let's get the HTML structure in Place
08:45

In this lecture, we will create move things a bit and create our first child component to hold the options!

Moving the options to the child component!
07:48

In this lecture, we will make our child component dynamic.

Adding the dynamic behavior to our new Child!
04:42

In this lecture, we will add some random logic to the 2 numbers we will get when the game starts.

Make the 2 numbers random!
06:46

In this lecture, we will randomize the games logic, so that the 4 options that are fetched are random enough!

Randomize the game logic! Yes, it's all about the logic..
15:08

In this lecture, now that the options and the problem statement are set, we will make the game playable!

Game Play - Click the option tiles and determining the correct one!
10:33

In this lecture, we will see how to activate the play again feature of the game!

Let's play again!
13:15

In this lecture, we will add some animation and see some assignments for the next project!

Let's add some animations!
07:00
+
Project Assignment - Easy ABC
8 Lectures 01:16:29

In this lecture, I will give you an overview of the new project/assignment inspired by the previous example. Please use the attached file in the resources to accept the coding challenge to do the game yourself.

Preview 05:29

In this lecture, we will code our HTML for the game, so the static part of the game is in place.

Adding the HTML structure!
08:27

In this lecture, we will make use of the JSON file to read the images and the sound urls from it, so that we can display it dynamically in the game!

Making content load from a JSON file
10:21

In this lecture, we will add the functionality for the next button, so that we understand how events work in the game!

Let's add some functionality on the next button!
10:51

In this lecture, we will use our understanding of events to add functionality to the previous button.

Now, lets make sure our past is covered - adding previous button functionality
09:09

In this lecture, we will make sure the sound we have in the JSON file, can be used and heard when the game loads.

Lets add some sound to our game!
11:11

In this lecture, we will add some settings parameters, like random and sound.

Adding the 'random' and 'sound' settings
12:09

In this lecture, we will deploy our application on the cloud, using Heroku and some magic commands!

Deploy the app to Heroku!
08:52
+
Build my Resume
6 Lectures 50:30

In this lecture, I will give you an overview of the new project that are going to build, it's our resume from an HTML/CSS template that we got it online.

Preview 03:44

In this lecture, we will use the Orbit Theme and make it work with our react application.

Let's Reactify our Orbit Theme
05:54

In this lecture, we will create our JSON file to hold the data we may need to make the resume work dynamically. Please use the resume.json attached in the resources section before we code the next lecture.

How about fetching the data from a JSON file?
06:06

In this lecture, we will break the HTML template into small react components, so that we can repeat ourselves and display content dynamically.

Break Things Down - To create components!
11:16

In this lecture, we will break the HTML template into small react components, so that we can repeat ourselves and display content dynamically.

Add more components - Let's make it dynamic
10:29

In this lecture, we will deploy our resume on the cloud, using heroku!

Wrapping up - Deploying
13:01
+
Love To Eat - Real world application
9 Lectures 01:42:56

In this lecture, we will do an overview of our new project "Love To Eat".

Overview
03:32

Let's setup Bootstrap for our app! Yes, Twitter Bootstrap!
07:11

Routing is the important aspect of any app! Let's add it...
08:11

This is a video to clarify the changes needed to the Love To Eat app due to the React Router 4.0 upgrade. I hope it clarifies all the questions and issues you might have faced while setting it up.

[New] React Router 4.0 Upgrade to Real World Example - Love To Eat
19:48

Adding the input form!
08:24

Adding Ingredients to our App!
09:37

Let's create our Recipe object!
15:55

Everything needs to be stored somewhere! - LocalStorage
13:46

Let's upload some images - with Cloudinary
16:32
About the Instructor
Abhay Talreja
4.6 Average rating
693 Reviews
31,639 Students
3 Courses
Developer, Team Lead, Software Consultant, Loves Technology

Hi, I'm Abhay! I have over 10 years of development experience in many languages from java, javascript, grails, iOS and Android. So, I can say, i have seen a lot to understand and know. I intend to pass this knowledge to anyone and everyone possible or I can reach onto!

I'm a web designer and developer with a great passion for building beautiful new things from scratch. I've been building websites since 2007 and also have a degree in Engineering and specialized in Computer Science. I have created websites and applications for various states in the USA.

It was in college where I first discovered my passion for teaching and helping others by sharing my knowledge. And that passion brought me to Udemy, where my students really appreciate that I take the time to explain important concepts in a way that everyone can easily understand.

Do you want to learn how to build awesome websites?

Want to know how to make your websites look beautiful and professional?

Looking for a complete JavaScript course that takes you from beginner to advanced developer?

Then enrol in my courses today and join the other happy students. If I had to describe each of my courses in one sentence, I would say “I wish I had this course, when I started learning technology".

So if you don't want to go through all the books and thousands of online articles and tutorials like I did, then enroll in my course today! I will be very happy to share my knowledge with you, and help you with everything I can along the way.

Happy Learning!!