ReactJS Training

Duration : 3 Days

Date : 21, 22, 23 Mar 2024

Overview

This workshop is aimed at imparting the required knowledge required to build Rich Internet Applications (RIA) using React.js.

At the end of this training course, the participants will:

Please find below the objective of the session:

• To understand what React.js is and what problem it solves
• The basic architecture of a React.js application
• To gain a deeper knowledge of React.js components and JSX
• Build a working application that uses React.js’s components
• Learn React.js best practices
• Compose an application using Flux architecture
• Learn how to maintain application state in a Redux Store
• Learn how to do module bundling using webpack
• Use React dev tools

Prerequisite for ReactJS

Must-Have

• Web development experience with an intermediate level of expertise in JavaScript.

Good to Have

• Understanding of any server technology (J2EE, .NET, Ruby, etc)

Course Contents

New in ES6

• Classes
• let and const
• Arrow functions
• Enhanced Object Literals
• Destructuring
• Spread Operator
• Generators and Iterators
• Symbols
• Comprehensions
• Async Programming using Promises
• Using Babel.js

RIA/SPA Basics

• Classic Web applications vs Rich Internet applications
• Challenges in building Client centric applications
• Benefits of RIA Frameworks
• Where React.js fits in?

Building UI using React.js

• Introduction
  • Need for React.js
  • Advantages of Virtual DOM
• View Components using JSX
  • JSX Syntax
  • Using JSX to create view classes
  • Creating views without using JSX
• Models
  • Advantages of Immutability
• Components
  • Component Life-Cycle
  • Virtual DOM
  • Component  Events
  • Using States and Properties
  • Initializing States from properties
  • Accessing DOM nodes using refs
  • Synthetic Events
  • Component Compositions
  • Communication Between Components
  • Reusable Components
• Forms
  • Controlled Components
  • Uncontrolled Components
• React.js Best Practices
• Developer Tools
  • React Dev Tools
• ADVANCED REACT.JS
• React Hooks
  • Stateful & Stateless components
  • Higher order components with State
  • Hooks introduction
  • Using the State hook
  • Using the Effects hook
  • Using the Context hook
  • Creating Custom hooks
• Error Boundaries
  • Handling Errors in React Components
  • Uncaught Errors
  • Identifying Error Boundaries
  • Handling Errors at the Error Boundaries
  • ComponentDidCatch event

Flux Architecture and Redux

• Introduction
  • Overview of Reactive programming
  • Benefits of Unidirectional data flow
• Architecture
  • Building blocks in Flux
  • Dispatcher
  • Stores
  • Action
  • Views
• Dispatcher
  • The role of dispatcher
  • Registering callbacks
  • Triggering Actions
• Store
  • The role of Store
  • Maintain Application State
  • Event Broadcasting
• Reducer
  • Creating Reducers
  • Retrieving State
  • Combining Reducers
• Action Creator
  • Creating Actions
  • Dispatching actions to the dispatcher
  • Using Middlewares
  • Dispatching Async Actions using Thunk middleware
• Views
  • React Components as Views
  • State Subscribers
  • Updating data from the store
• React-Redux Bindings
  • Binding Components to React Store using “Connect”
  • Injecting Redux Store using Provider
  • Using Providers with React Routers
• Middlewares
  • Using Middlewares
  • Creating Custom Middlewares
  • Logger Middleware
  • Async Middleware
  • Promise Middleware