Course Content

Introduction to Web Development and React

 Building Blocks of Web Application Development

 Single-page and Multi-page Applications

 Different Client-side Technologies

 MVC Architecture

 Introduction to React

 Installation of React

 JSX and its use case

 DOM

 Virtual DOM and its working

 ECMAScript

 Difference between ES5 and ES6

 NPM Modules

 Hands On

Components and Styling the Application Layout

 React Elements

 Render Function

 Components

 Class Component

 Component Constructor

 Functional Components

 Multiple Components

 Props

 Props with Class based Component

 Props with Function based Component

 States

 Component Lifecycle

 React Events

 React Forms

 Different Form Concepts

 Styling in React

 Inline Styling

 CSS Stylesheet

 Building Music Shop Application using React Components

 Hands On

Handling Navigation with Routes

 Routing

 react-router

 Features of react-router

 Configuration of routing using react-router

 Navigation using Links

 404 page (Not found Page)

 URL Parameters

 Nested Routes

 Implementing styles using NavLink

 Application Programming Interface

 Build a REST API using json-server

 API consumption in React application using Fetch method

 Build a dynamic Music Store application using Routing and API connectivity

 Hands On

React State Management using Redux

 Need of Redux

 What is Redux?

 Redux Architecture

 Redux Action

 Redux Reducers

 Redux Store

 Principles of Redux

 Pros of Redux

 NPM Packages required to work with Redux

 More about react-redux package

 Hands On

Asynchronous Programming with Saga Middleware

 Need of Async operations

 Async Workflow

 Action Creators

 How to write Action Creators?

 Handling Async Actions via Reducers

 Middleware

 Redux-Saga

 Generators in Redux-Saga

 Saga Methods()

 Major Sections of Redux-Saga

 Building a Product List application using Redux-Saga Middleware

 Debugging application using Redux Devtools

 Hands On

React Hooks

 Caveat of JavaScript classes.

 Functional components and React hooks

 What are React hooks?

 Basic hooks

 useState() hook

 How to write useState() hook when state variable is an array of objects

 useEffect() hook

 Fetch API data using useEffect() hook

 useContext() hook

 Rules to write React hooks

 Additional hooks

 Custom hooks

 Hands On

Fetch Data using GraphQL

 What is GraphQL?

 Cons of Rest API

 Pros of GraphQL

 Frontend backend communication using GraphQL

 Type system

 GraphQL datatypes

 Modifiers

 Schemas

 GraphiQL tool

 Express framework

 NPM libraries to build server side of GraphQL

 Build a GraphQL API

 Apollo client

 NPM libraries to build client side of GraphQL

 How to setup Apollo client

 Hands On

React Application Testing and Deployment

 Define Jest

 Setup Testing environment

 Add Snapshot testing

 Integrate Test Reducers

 Create Test Components

 Push Application on Git

 Deploy App on Nginx

 Create Docker for React Application

 Hands On

Introduction to React Native

 Native Applications

 React Native

 React Native Elements

 Expo CLI

 Build a shopping cart mobile application using React Native

 React Native installation and setup

 Working with Styles and Layout

 Hands On

Building React Native Application with API

 Native modules

 Native Navigation libraries

 Integration of Redux with React Native

 React Native and Redux major components

 Redux Thunk middleware

 NPM libraries

 Shopping cart application using React Native and Redux

 Integration of Redux actions, store and reducers In React Native application

 Hands On