React JS

Duration | 40 hours

ReactJS presents graceful solutions to some of front-end programming’s most persistent issues. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. React JS is a new age UI(user interface) tool that is more interactive and flexible as compared to most other tools.

It comprises of components which are re-usable and easy to use. This course helps to learn how to use ReactJS and the Redux library to create next gen web applications. It covers all the practical aspects of developing with React, managing data and server communication with Redux.

Prerequisites

Good knowledge in HTML/CSS, Fundamentals of JavaScript

Sign Up

Course Objectives

The main objective of ReactJS is to develop efficient web Applications, User Interfaces (UI) that improves the speed of the apps. It uses virtual DOM (JavaScript object), which improves the performance of the app.

Things you will learn

We help our students at every stage, from the start of a course to the actual skill-building technique. Our curriculum covers the following.

What is React JS?

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

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?

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.
  • NPM Installation by locally and Globally
  • Create a Basic App with React JS and other Supported NPM

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
  • The flow of States, Initialize states and update states
  • Create a Small React Module
  • Use All the states in the created Application

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
  • Create a React Form
  • Client-side form validation
  • Applying form components
  • Submit and Rest the form

React JS component life cycles overview

  • Initial Render
  • Props Change
  • Stage Change
  • Component willMount
  • Component didMount
  • Component Unmount
  • Applying Different Lifecylces in the Application
  • When to choose Appropriate lifecycles

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 a complex logic overview
  • Create a Single Page Application
  • Applying Routing
  • Dynamically render the components based on the url

Event Handling in JSX

  • onBlur, onKeyUp, onChange and other useful primary events in React JS
  • How to Share events between the components?
  • Communicate Data between components
  • Applying all lists of events

How to write styles in React JS?

  • CSS and inline styles in React JS overview
  • Introduction to styled components
  • Styling the application using styled component
  • How to use Animations in the Application

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

Flux, Redux 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
  • Introduction to One Store
  • Provider Component
  • Actions
  • Reducers
    sagas
    Dispatchers
    View Controllers
    Selector
    Redux application Development with Real-time Project

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?

Integration with other libraries

  • Gulp &Browserify
  • React with jQuery
  • React & AJAX

React Server Integration & Deployment

  • https
  • httpster
  • npm

Ab Job Pakki!!
Kickstart your career

Sign Up
Call Now