React Training

React JS

Course Outline
 
Module 1 – Getting Started with React JS

Objective:
This module will introduce you to the basic constructs of web application development, MVC architecture, what is React JS and the differences between single and multiple page applications. You will also learn how to install React JS and make use of NPM packages.
 
Topics:
•     Building Blocks of Web Application Development
•     Web Application Architecture
•     React JS Introduction
•     Advantages of React JS
•     Work flow of React JS
•     Scope of React JS
 
Hands-On:
•        Installation of Node.js, React JS and Visual Studio Code
•        Creating First React Application
•        How to run React Application / server
 
Module 2: OVERVIEW OF JSX
 
Objective:
 In this module, you will learn about Virtual DOM, JSX, containers, parent and child components concepts.
 Topics:
•        Introduction of Virtual DOM.
•        Difference between JS and JSX.
•        React Components overview
•        Containers and components
•        What is Child Components?
•        What is name-spaced components?
•        What are the JavaScript expressions available in JSX?
 
Hands-On:
•        Familiarity with JSX syntax and creation of parent and child component.
 
 Module 4 – REACT JS ENVIRONMENT SETUPS

Learning Objective:
This module will introduce you to how to setup environment for working on react project.
 
Topics:
•        Node setup
•        How to use NPM?
•        How to create package.json and purpose of it?
•        ES6 Introduction and features.
•        Webpack Overview
•        Best IDE for React JS and How to write optimized code in React JS?
•        React JS browser plugins overview.
 
Hands-On:
 
• NPM Installation by locally and Globally
• Create a Basic App with React JS and other Supported NPMs.
 
Module 4 – A REAL-TIME APPLICATION BY USING REACT JS

Learning Objective:
This module will introduce you to the basic usage of pipes and creation of custom pipes.
 Topics:
•        Create a React component with JSX template.
•        How to create Nested Components?
•        What is React JS render?
•        React Props overview.
•        Introduction of Props validation with data types.
•        Flow of States, Initialize states and update states.
Hands-On:
•        Create a Small React Module
•        Use All the states in in the created Application
 
Module 6 – REACT JS FORMS AND UI

Learning Objective:
 This module will introduce you to usage of in-built directives, display data using loops along with hiding and showing content.
 
Topics:
•     Lists of Form components.
•        Setup Controlled and Uncontrolled form components.
•        Control Input elements.
•        How to set default values on all formats of Input elements.
•        React JS Form validations.
•        How to write Styles?
•        Animations overview
 
Hands-On:
•        Create a React Form.
•        Client-side form validation.
•        Applying form components.
•        Submit and Rest the form.
 
 
Module 7 – REACT JS COMPONENT LIFE CYCLES OVERVIEW

Learning Objective:
 This module will introduce you to life cycle of a react component.
 
Topics:
•        Initial Render
•        Props Change
•        Stage Change
•        Component willMount
•        Component didMount
•        Component Unmount
Hands-On:
•        Applying Different Lifecylces in the Application.
•        When to choose Appropriate lifecycles.
 
Module 8 – ROUTING IN REACT JS AND OTHER JS CONCEPTS
Learning Objective:
This module will introduce you to how to create a form and apply validation.
 
Topics:
•        Single Page Application Overview.
•        How to configure React Router?
•        History of Router
•        How to Handle Conditional statement in JSX?
•        IIFE in JSX for complex logic overview.
 
Hands-On:
•        Create a Single Page Application.
•        Applying Routing.
•        Dynamically render the components based on the url.
 
Module 9 – EVENT HANDLING IN JSX
Learning Objective:
This module will introduce you to how to inject the dependency.
 
Topics:
•        onBlur, onKeyUp, onChange and other useful primary events in React JS.
•        How to Sharing events between the components?
 
Hands-On:
•        Communicate Data between components.
•         Applying all lists of events
 
Module 10 – HOW TO WRITE STYLES IN REACT JS?
Learning Objective:
This module will introduce you to about HTTP client to communicate with server.
 
Topics:
•       CSS and inline styles in React JS overview.
•       Introduction to styled components
Hands-On:
•        Styling the application using styled component
•        How to use Animations in the Application
Module 11 – REACT ROUTER WITH NAVIGATION

Learning Objective:
This module will introduce you to about React Router and how to apply.
 Topics:
•        How to Load the router library?
•        Configure the React Router?
•        How to Pass and receive parameters?
•        Integration of React-cookie overview.
 
Hands-On:
Module 12 – FLUX Overview
Learning Objective:
This module will introduce you to about Flux architecture and its component.
 
Topics:
 •        What is Flux Architecture?
•        What are the Flux Components available?
•        Stores.
•        Dispatchers.
•        View Controllers.
•        Actions.
•        Views.
•        How Flux works?
•        Flux and React works together.
 
Hands-On:

Module 13 – REDUX OVERVIEW
Learning Objective:
This module will introduce you to about Flux architecture and its component.
 
Topics:
 •        Introduction to One Store.
•        Provider Component
•        Actions.
•        Reducers.
•        sagas
•        Dispatchers
•        View Controllers
•        Selector
 
Hands-On:
•        Redux application Development with Real-time Project
 
Module 14 – UNIT TESTING OVERVIEW
Learning Objective:
This module will introduce you to about Flux architecture and its component.
 Topics:
 •       What are the necessary Tools required for Unit Testing?
•        React Unit Testing overview
•        Introduction to JEST.
•        How to Test React Component?
•        How to Test React Router?
Hands-On:
•        Redux application Development with Real-time Project