React JS

Course type

  • Instructor Led Classroom Training

Course Duration

  • Total duration – 40+ hours

Prerequisites

  • Basic HTML and CSS
  • Knowledge of JavaScript
  • Web development experience is good to have

Learning outcomes

  • Understand React key features
  • Learn about the Data Flow and usage with React
  • Implement Bootstrap and CSS to style a React app
  • Identify the right set of structures and state containers for your React application
  • Manage data by using state and props of React
  • Learn how to handle events and execute React’s router
  • Understand Redux key features
  • Learn about Async Actions and Async Flow in Redux
  • Learn about Testing in Redux
  • Implement server-side rendering for SEO benefits and to reduce initial load times
  • React and flux dev tools for better debugging
  • Create, build, and deploy a React.js application using the React.js CLI
  • Develop dynamic Model-driven forms that are easier to unit test

Hands-on Projects

  • Projects on each module covered in this course.
  • ReactJs project: Build an end-to-end WebApp.

Course Overview -ReactJs

  1. The Basics
    • Introduction
    • Why React?
    • React’s Basic Concepts
    • Introduction to React Component
    • One-way Data Flow in React
    • Demo: Setting up a React Development Environment
    • Advantages and Disadvantages
    • Architecture
  1. JSX
    • Introduction
    • What Is JSX?
    • Props in JSX
    • Spread Attributes
    • Events
    • React Data Flow
    • JSX and HTML
    • Unescaping Content
    • Child Expressions and Elements
  1. Components
    • Introduction
    • What Is a Component?
    • Defining a Component
    • Rendering a Component
    • Bootstrapping the Component
    • Props
    • Class Components
    • Component Lifecycle
    • State
    • setState
    • Prop Validation
    • DOM vs Virtual DOM
  1. Components in depth
    • Stateful versus Stateless Component
    • Class-based vs Functional Component
    • Component Lifecycle
    • DOM vs Virtual DOM
    • shouldComponentUpdate() for Optimization
    • Pure Components
    • Higher Order Component (HOCs)
    • PropTypes
  1. Connecting React App to Web 
    • HTTP requests in React
    • Installing and Understanding Axios
    • Async/Await
    • Fetching data from Server
    • Sending data to Server
    • Deleting data on Server
    • Global Configuration for Axios
    • Handling Network Errors
  1. Events
    • Introduction
    • Events
    • DOM Events
    • preventDefault
    • Component Events
  1. Forms
  • Introduction
  • Controlled Components
    • React Forms
    • Implementing React Form
  • Form State and Change Handlers
  • Declaring State Change Handlers
  • Creating Reusable Inputs
  • Consuming Reusable Inputs
  • Saving Data
  • Input Validation and PropTypes
  • Populate Form via the URL
  • Form Elements
  • Allowing User Input
  • Form Libraries
  • Form Validation
  1. Routing 
    • Setting up React-Router
    • Links
    • Switch
    • Passing Route Parameters
    • Redirecting Requests
    • Conditional Redirects
    • Handling 404
  1. Subscribing to State 
    • Upgrading Dependencies
    • SetState Function
    • External State
    • Pass State to Child Components
    • Refactoring
  1. Redux(Optional)
    • Complexity of Managing State and Why Redux
    • Understanding Redux Flow
    • Setting up Reducer and Store
    • Actions and Subscriptions
    • Connecting Redux to React
    • Updating State Immutably
    • Handling Multiple Reducers
  1. Flux(optional)
    • Flux
    • Intro
    • What Is Flux?
    • Three Core Flux Concepts
    • Actions
    • Dispatcher
    • Stores
    • Controller Views
    • Flux Flow and a Chat With Flux
    • Flux API
    • The Flux Pattern
    • Implementing a Flux Store
    • More Flux Details
    • Implementing Flux Shoutouts
  1. Build and Build Tools 
    1. Babel
    2. NPM
    3. Webpack
    4. Creating a Production Build