Learn JavaScript React framework by examples

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 ﬁle, 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

Requirements

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:

Learn JavaScript React framework by examples