React Js

Reading Time: 3 minutes


    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?