REACT JS

Module 1: What is React JS?

• React JS Introduction
• Advantages of React JS
• Work flow of React JS
• Scope of React JS

Module 2: Overview of JSX

• Introduction of Virtual DOM.
• Difference between JS and JSX.
• React Components overview
• Containers and components
• What is Child Components?
• What is Namespaced components?
• What are the JavaScript expressions available in JSX?

Module 3: React JS Environment Setups

• 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.

Real-time Practicals

• 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

• 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.

Real-time Practicals

• Create a Small React Module
• Use All the states in in the created Application.

Module 5: React JS forms and UI

• 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

Real-time Practicals

• Create a React Form.
• Client-side form validation.
• Applying form components.
• Submit and Rest the form.

Module 6: React JS Component Life Cycles Overview

• Initial Render
• Props Change
• Stage Change
• Component willMount
• Component didMount
• Component Unmount

Real-time Practicals

• Applying Different Lifecylces in the Application.
• When to choose Appropriate lifecycles.

Module 7: Routing in React JS and Other JS concepts

• 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.

Real-time Practicals

• Create a Single Page Application.
• Applying Routing.
• Dynamically render the components based on the url.

Module 8: Event Handling in JSX

• onBlur, onKeyUp, onChange and other useful primary events in React JS.
• How to Sharing events between the components?

Real-time Practicals

• Communicate Data between components.
• Applying all lists of events.

Module 9: How to write Styles in React JS?

• CSS and inline styles in React JS overview.
• Introduction to styled components

Real-time Practicals

• Styling the application using styled component
• How to use Animations in the Application.

Module 10: React Router with Navigation

• How to Load the router library?
• Configure the React Router?
• How to Pass and receive parameters?
• Integration of React-cookie overview.

Module 11: Flux overview

• What is Flux Architecture?
• What are the Flux Components available?
• Stores.
• Dispatchers.
• View Controllers.
• Actions.
• Views.
• How Flux works?
• Flux and React works together.

Module 12: Redux Overview

• Introduction to One Store.
• Provider Component
• Actions.
• Reducers.
• sagas
• Dispatchers
• View Controllers
• Selectors

Real-time Practicals

• Redux application Development with Real-time Project

Module 13: Unit Testing Overview

• 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?