Last Update: Feb 25, 2024

Learn JavaScript React framework by examples

  • Free

About Course

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:

Session 1- Getting started with React

Section 1.1- What is ReactJS?

Section 1.2- Installation or Setup

Section 1.3- Hello World with Stateless Functions

Section 1.4- Absolute Basics of Creating Reusable Components

Section 1.5- Create React App

Section 1.6- Hello World

Section 1.7- Hello World Component


Session 2- Components

Section 2.1- Creating Components

Section 2.2- Basic Component

Section 2.3- Nesting Components

Section 2.4- Props

Section 2.5- Component states – Dynamic user-interface

Section 2.6- Variations of Stateless Functional Components

Section 2.7- setState pitfalls


Session 3- Using ReactJS with TypeScript

Section 3.1- ReactJS component written in TypeScript

Section 3.2- Installation and Setup

Section 3.3- Stateless React Components in TypeScript

Section 3.4- Stateless and property-less Components


Session 4- State in React

Section 4.1- Basic State

Section 4.2- Common Antipattern

Section 4.3- setState()

Section 4.4- State, Events And Managed Controls


Session 5- Props in React

Section 5.1- Introduction

Section 5.2- Default props

Section 5.3- PropTypes

Section 5.4- Passing down props using spread operator

Section 5.5- Props.children and component composition

Section 5.6- Detecting the type of Children components


Session 6- React Component Lifecycle

Section 6.1- Component Creation

Section 6.2- Component Removal

Section 6.3- Component Update

Section 6.4- Lifecycle method call in different states

Section 6.5- React Component Container


Session 7- Forms and User Input

Section 7.1- Controlled Components

Section 7.2- Uncontrolled Components


Session 8- React Boilerplate [React + Babel + Webpack]

Section 8.1- react-starter project

Section 8.2- Setting up the project


Session 9- Using ReactJS with jQuery

Section 9.1- ReactJS with jQuery


Session 10- React Routing

Section 10.1- Example Routes.js file, followed by use of Router Link in component

Section 10.2- React Routing Async


Session 11- Communicate Between Components

Section 11.1- Communication between Stateless Functional Components


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:

Show More

What Will You Learn?

  • Learn new things
  • Revamp your career
  • Target IT jobs
  • Sharpen your skills
Free access this course


  • A laptop or PC
  • Good Internet
  • Routine Study
  • Regular Join Class