REACT JS

Duration: 2 months

WHO CAN JOIN REACTJS?

The React JS training targets to provide all the essential web development knowledge to master React JS. React JS is a powerful JavaScript library, so a basic knowledge of JavaScript is expected for this training. The target audience for React JS training are the web developers looking to enhance their skills in front-end development. If you are interested in developing front-end applications, then React will be a perfect choice for you. We have introduced this course because of increasing demand for React JS developers. The popularity of this JS framework is exponentially increasing among the front-end developers and by learning React, you can easily qualify for the job of a front-end developer. After the successful completion of React JS training, the web developers will be able to develop high-performance applications with small and reusable React JS components.

Benefit of learning ReactJS

  • There are several benefits of learning React JS:
  • Learn the basics of SPAs using React.
  • Help understand best practices of React JS
  • Become familiar with the essential web developer tools
  • Learn to build rich user interfaces using React
  • Acquire skills to integrate React with other technologies like Redux
  • Get an understanding of React-Redux Architecture to build frontend applications.
  • Introduction into some of the advanced concepts of React.
  • Build real-world applicable projects.
  • Career opportunity as front-end developer.

Course Organization

The course is designed in such a way that you will first be given the concept of HTML and CSS. After that you will be introduced with the event driven programming language JavaScript. Some of its features like events, DOM, built-in objects and ES6 features are very important concept to understand the power of JavaScript. Then, you will be introduced with React library and its features and then state management using Redux. You will develop an application in front end using React library. You will also be able to integrate state management and also handle asynchronous HTTP request using React, Redux and Axios.

ReactJS Course outcome

At the end of the course students will be developing a fully functional frontend application using ReactJS.

Introduction and Development Trends

  • Objective of this training
  • What is React?
  • Why React instead of just JavaScript?
  • Single Page Applications
  • Component Driven A
  • Present scenario/Scopes of this technology.
  • Exploring React JS alternatives

JavaScript Refresher

  • Module Introduction
  • Understanding "let" and "const"
  • Arrow Functions
  • Exports and Imports
  • Understanding Classes
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Destructuring
  • Reference and Primitive Types Refresher
  • Refreshing Array Function
  • JS Array Functions
  • String literals

Environment Setup

  • Installing VS Code
  • Installing Node
  • Package Manager (NPM/YARN)
  • Project Setup

React Basics

  • Brief Introduction of React
  • React (Library vs Framework)
  • React Architecture
  • JSX
  • React Components
  • States
  • Props
  • Functional Components
  • React Component Lifecycle Methods
  • React Hooks
  • Class Components Vs Functional Components (Hooks)
  • Conditional Rendering
  • Mapping(list) and Keys
  • Handling events
  • Styling React Components

Debugging React Applications

  • Web Developer Tools
  • Understanding Error Messages
  • Working with breakpoints
  • React Developer Tools

React Router

  • Introduction
  • Setup react router to handle routes
  • React Router v4
  • Introduction to React Router v6
  • History
  • Advanced Routing

State Management

  • Flux Architecture
  • State management using Redux
  • Principles of Redux
  • Reducers
  • Actions and Action Creators
  • Redux Middlewares
  • Redux Thunk
  • Connecting Redux with React Components

RESTful API

  • Introduction API
  • RESTful API
  • API methods
  • AJAX
  • JSON
  • Axios

Stepping into Project and Architecture

  • Forms, User Inputs & Validations
  • Asynchronous Redux
  • Handling RESTful API using React, Redux & Axios
  • Fetching data in React Component

Advanced Concepts

  • React Optimization Techniques
  • Custom Hooks
  • Higher Order Components
  • User Authentication
  • Introduction to Typescript
  • Code Splitting and Lazy Loading

Key Developer Concepts

  • map()
  • Promises
  • filter()
  • includes()
  • Async Await
  • find()
  • reduce()
  • Memoization
  • Currying

Git

  • Introduction to Git
  • Initializing git
  • Making and cloning git repository
  • Git commit/push
  • Creating branches
  • Pull/Merge Requests

Project

  • E-commerce Website
  • Online Inventory
  • HR Management System

Send Enquiry

loading gif