The Complete React JS Course - Basics to Advanced
4.4 (73 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.
7,305 students enrolled

The Complete React JS Course - Basics to Advanced

Learn React JS from scratch with hands-on practice assignments and projects. ( Use CouponCode =>> JULY2020)
4.4 (73 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.
7,305 students enrolled
Last updated 5/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 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
  • Introduction to what is React and its basic concepts
  • Learn what is JSX and how it works behind the scenes
  • Learn what are the stateful and stateless components and when to use them
  • Working with function based and class based components
  • Working with React Modules, importing and exporting the modules
  • Learn in detail about how the render method works
  • React component lifecycle and different lifecycle methods
  • Creating dynamic websites with help of re-usable components
  • Creating a proper working structure for a project from scratch which will help maintaining the project for long term
Course content
Expand all 26 lectures 03:36:03
+ React Introduction
4 lectures 16:51

Hey guys, Welcome to the ReactJS Module.


In this module, we are gonna cover everything you will need to create end-to-end React applications.

We will learn :

  • What is SPA(Single Page Application)

  • What is JSX

  • What are state and props

  • Stateful and Stateless components

  • CSS Modules

  • render() method

  • lifecycle methods

We will also have one practice assignment and one final project based on all the concepts we have learned so far in this course.


This is the introductory video of ReactJS. In this video, we will talk about

  • What is ReactJS?

  • How can it help you?

  • Who is using it?


Hope you are excited for this course!!

Preview 03:11

Hey guys, in this video we will talk about Single and Multi-page Applications.


My Twitter Handle: @qaifikhan

Preview 03:24

Hey guys, in this video we will learn How to use create-react-app to bootstrap a new React project.


My Twitter Handle: @qaifikhan

ReactJS - Creating our First React App
06:31

Hey guys, in this video we will talk about different files created by default when we bootstrap a react project using create-react-app(CRA).


My Twitter Handle: @qaifikhan

ReactJS - Project Structure created by CRA
03:45
+ JSX
4 lectures 31:51

Hey guys, in this video we will learn about JSX.


My Twitter Handle: @qaifikhan

Preview 11:46

Hey guys, in this video we will talk about what happens behind the scenes when we use JSX.


My Twitter Handle: @qaifikhan

ReactJS - JSX Behind the Scenes
07:53

Hey guys, in this video we will learn how to add styles to React Elements using inline styles and external style sheet.


My Twitter Handle: @qaifikhan

ReactJS - Adding Styles to React Elements
07:34

Hey guys, in this video we will learn how to create react elements dynamically using lists.


My Twitter Handle: @qaifikhan

ReactJS - Create React Elements Dynamically
04:38
+ Introduction to Components
2 lectures 13:29

Hey guys, in this video we will learn how to create React Components.


My Twitter Handle: @qaifikhan

ReactJS - Creating our First React Component
06:40

Hey guys, in this video we will learn how to pass data to components using props.


My Twitter Handle: @qaifikhan

ReactJS - Passing Data to Components using Props
06:49
+ Import and Export Modules
1 lecture 09:04

Hey guys, in this video we will learn how to export and import modules using the "export" and "import" keywords.


My Twitter Handle: @qaifikhan

ReactJS - Import and Export of Modules
09:04
+ Styling Components
2 lectures 07:57

Hey guys, in this video we will learn how to use CSS module to localize our CSS classes.


My Twitter Handle: @qaifikhan

ReactJS - Introduction to CSS Modules
06:21

Hey guys, in this video we will learn how to add media queries to make our components Mobile Responsive.


My Twitter Handle: @qaifikhan

ReactJS - Creating Mobile Responsive Components
01:36
+ Components in Details
5 lectures 39:27

Hey guys, in this video we will learn about the difference between Stateful and Stateless Components.


My Twitter Handle: @qaifikhan

ReactJS - Stateful vs Stateless Components
02:44

Hey guys, in this video we will learn how to create a Class-based Component. 


My Twitter Handle: @qaifikhan

ReactJS - Creating Class-based Components
09:43

Hey guys, in this video we will learn more about the setState() method. 


My Twitter Handle: @qaifikhan

ReactJS - More about setState() Method
05:39

Hey guys, in this video we will learn how to pass props to class-based components. 


My Twitter Handle: @qaifikhan

ReactJS - Passing Props to Class-based Components
11:01

Hey guys, in this video we will learn how to pass functions as props to components. 


My Twitter Handle: @qaifikhan

ReactJS - Passing Function as Props
10:20
+ Practice Problem 1
4 lectures 01:16:18

Hey guys,

In this video, I have talked about a small application, "Product Details Page". I want you to try and make it.


ProductData file URL: https://drive.google.com/file/d/14Wo44Xi-Dp2xR16d7WFx7fqiB33lKyzS/view?usp=sharing


My Twitter Handle: @qaifikhan

ReactJS - Practice Problem: Product Details Page
01:31

Hey guys,

This is part 1 of the solution for the Product Details Problem I gave in the previous video.

My Twitter Handle: @qaifikhan

ReactJS - Practice Problem: Product Details Page [Solution] - Part 1
31:37

Hey guys,

This is part 2 of the solution for the Product Details Problem I gave in the previous video.

My Twitter Handle: @qaifikhan

ReactJS - Practice Problem: Product Details Page [Solution] - Part 2
27:21

Hey guys,

This is part 3 of the solution for the Product Details Problem I gave in the previous video.

My Twitter Handle: @qaifikhan

ReactJS - Practice Problem: Product Details Page [Solution] - Part 3
15:49
+ Component Life-cycle
4 lectures 21:06

Hey guys,

In this video we will talk about what happens when render() method is called.

My Twitter Handle: @qaifikhan

ReactJS - render() method - Behind the scenes.
02:57

Hey guys,

In this video we will talk about the component creation lifecycle.

My Twitter Handle: @qaifikhan

ReactJS - Component Lifecycle - Creation
05:52

Hey guys,

In this video we will talk about the component updation life-cycle.

My Twitter Handle: @qaifikhan

ReactJS - Component Lifecycle - Updation
06:39

Hey guys,

In this video we will learn how to use shouldComponentUpdate() lifecycle method to avoid unnecessary re-renders to improve the performance of our react app.

ReactJS - shouldComponentUpdate() Lifecycle Method
05:38
Requirements
  • Good understanding of HTML5, CSS3
  • A good knowledge of Javascript and Modern Javascript - ES6
Description

This course is a complete guide for the React JS. Here, you will learn all the concepts required for becoming a frontend React JS developer. If you are new to the web development field or a professional creating websites with plain old javascript or jQuery, this is your time to learn React JS and take your web development skills to the next level and impress your recruiter or clients.

React JS is gaining rapid popularity. In a matter of few years, it has become the most widely accepted web development javascript library. This is the right time for you to learn and add React JS to your skillset and excel in your career.

This course is designed in a way that anyone can understand the basic to advanced concepts of React with simple explanations by the instructor along with hands-on assignments and projects.

In the first part of this course:

  • We cover what is React JS, how it uses JSX, how the compilation is done behind the scenes using babel to browser understandable plain old HTML, CSS, and javascript.

  • After that, we explain 'components' which are the basic building blocks of a web page while working with React JS. We also cover the stateless and stateful components and when to use those components as well.

In the next section, we learn how to create modules in React JS and how to import or export those modules to other files so that we can reuse the same set of code again and again.

In the following section, we will work on how do we style the components using CSS modules and how to create a nice user-friendly mobile responsive website.

We also cover how to work with props, how to pass data from stateful to stateless components, and how to pass functions from one component to another component.

We explain the different lifecycle methods of a React Component and how we can access and modify the data between these lifecycles using the various lifecycle methods available to us.

We will keep on adding more videos to the course as we are creating them. These videos will be available to you soon.

Who this course is for:
  • Beginners who just started to work in web development field
  • Beginner web developers who want to learn React JS web framework
  • Developers who have basic knowledge of Javascript and want to add React JS in their skill set
  • Web Developers who want to learn React JS from scratch and want to get promotions in their job
  • Professionals, already working with other web frameworks like Angular or Vue and want to learn React JS
  • Frontend Web Developers who wish to change their working technology domain by learning React JS