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



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:


Select a pricing plan and sign up

Course Curriculum

The curriculum block is dynamic. As you add curriculum to your course, you'll see it automatically populate here.

EXAMPLE
Section Title

Choose a Pricing Option