In this course you learn how to use JavaScript React framework to build complex front-end applications.

In this in-depth self-paced course for experienced JavaScript developers, you will gain a thorough understanding of what React is and how it works, along with practical hands-on experience creating a React application from scratch. You will understand the problems that React can help you solve, gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.

Learning Objectives

You will learn the following:

  • Setting up your ReactJS Development Environment
  • Introduction to JSX
  • Creating a simple React Application
  • Forms
  • Component Life Cycle
  • Conditional statements in React
  • Event Handling in JSX
  • React Styles
  • React Router & Navigation
  • Unit Testing

Topics and Subtopics

The following outline is covered in this course:

1- Introduction to ReactJS

- Understand JavaScript MVC

- Understand the View Technology

- Overview of ReactJS

- Configuration

- Javascript MVC

- View Technology

- Introduction to ReactJS

- React and SPA

- Basic Setup

- First Example – Hello World

2- React Basics

- React Concepts


- Render Elements 

- Components and Props

- State and Lifecycle

- Handling Events

- React Concepts

3- React Key Features

- Conditional Rendering

- Lists and Keys

- Forms

- Lifting State Up

- Composition vs Inheritance

- Thinking In React

4- Redux Introduction

- Introduction

- Motivation

- Core Concepts

- Three Principles

- Legacy of Redux

- Redux Setup

- First example

5- Redux Basics

- Action

- Action Creators

- State Shape

- Handling Actions

- Handling more actions

- Splitting Reducers

- Store

- Dispatch Actions

6- Data Flow and Usage with React

- Data Flow

- Install React Redux

- Presentational and Container Components

- Design Component Hierarchy

- Implementing Components

- Passing the store

7- Async Actions and Async Flow in Redux

- Synchronous Action Creators

- Design State Shape

- Handle Actions

- Async Action Creators

- Async Flow

8- Middleware and React Router

- Middleware

- Middleware Applicability

- React Router Overview

- React Router Configuration

- React Router with Redux

- Navigate with React Router 

9- Advanced features of Redux

- Object Select Operator Overview

- Object Select Operator Applicability

- Redux on Server

- Configuration – Server Rending

- Server side – Server Rendering

- Client side – Server Rendering

10- Testing Redux

- Overview of Jest

- Setup testing environment

- Test Action Creators

- Test Async Action Creators

- Test Reducers

- Test Components

- Test Connected Components

- Test Middleware

- Other Testing options

11- Project 1

12- Project 2

13- Project 3


Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.

Related Courses

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in our Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.

Private Tutoring Classes

To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:

What Is Next?

After finishing this course, you can enroll in any of following classes:

Recommended Free Courses

If you are new to the IT or programming, we suggest the following free courses:

Select a pricing plan and sign up


Paid Course

2 payments of $59/month

Paid Course

4 payments of $39/month

Paid Course