React 16 And Redux Training – kavoneinstitute

About Course

Are you interested to learn how to build user interface? Do you work as a user interface designer? If so, take a look at our React 16 and Redux Training course. Its precise contents will help you in understanding all you need to know about React 16 and Redux effectively.

React 16 is an updated JavaScript library works to build user interface in different stage. It provides you with effective mental model so that you can build astonishing user interface efficiently.

The React 16 and Redux Training course is designed to teach you the basic functions of React 16. It instructs you how to develop apps providing the knowledge with portals, context API, errors boundaries, and the use of less code to write. The course also introduces you to the important features of React such as user-friendly DOM to build UI design, different algorithm to test without starting a headless browser, and different framework for the development. However, the aim of the course is to teach you the core concepts of React to make you an efficient UI designer.

Assessment

This course does not involve any MCQ test. Students need to answer assignment questions to complete the course, the answers will be in the form of written work in pdf or word. Students can write the answers in their own time. Once the answers are submitted, the instructor will check and assess the work.

Certificate of Achievement

After completing this course successfully, you will be able to obtain an Accredited Certificate of Achievement. Certificates & Transcripts can be obtained either in Hardcopy at USD 19.30 or in PDF format at USD 15.44.

Course Content

Getting Started

VS Code Setup

00:00
How to get source code for each lecture

00:00
Create React App using create-react-app cli

00:00
Creating Nested React Elements

00:00
Creating Nested Elements in React

00:00
How React uses React Elements to Create Virtual DOM

00:00
What is DOM

00:00
What is Virtual DOM

00:00
Create Nested Components in React

00:00
Creating Components in React

00:00
Adding Props Validations in React Component

00:00
Create Nested Components in React

00:00
Create State in React Component

00:00
Update State using events and custom methods

00:00
Iterate Array and render the components

00:00
Pass function as props from Parent to Child Componenty

00:00
Convert React Components to JSX

00:00
Module Summary

00:00

Data Flow in React Components

Component LifeCycle Methods in React

Hackers News App – Building Components

Setup React Application

00:00
Add Bootstrap to React Application

00:00
Create Mock Restful API with Json-Server

00:00
Send HTTP Request in React using axios

00:00
Iterate Array and render the components

00:00
Add Bootstrap Card to render List Items

00:00
Creating Header Component

00:00
Error Handling with Custom ErrorMessage Component

00:00
Adding Loading Spinner

00:00

About Course

Assessment

Certificate of Achievement

Course Content

Getting Started

VS Code Setup

How to get source code for each lecture

Create React App using create-react-app cli

Creating Nested React Elements

Creating Nested Elements in React

How React uses React Elements to Create Virtual DOM

What is DOM

What is Virtual DOM

Create Nested Components in React

Creating Components in React

Adding Props Validations in React Component

Create Nested Components in React

Create State in React Component

Update State using events and custom methods

Iterate Array and render the components

Pass function as props from Parent to Child Componenty

Convert React Components to JSX

Module Summary

Data Flow in React Components

State in React Component

Shallow Merging with setState

Use props, PropTypes and defaultProps in React Component

Communicate with Parent and Child Component

Module Summary

Component LifeCycle Methods in React

What are LifeCycle Methods in React Component

Types and Phases of LifeCycle Methods

LifeCycle Mounting Methods in Action

LifeCycle Updating Methods in Action

Error Handling with componentDidCatch

Hackers News App – Building Components

Setup React Application

Add Bootstrap to React Application

Create Mock Restful API with Json-Server

Send HTTP Request in React using axios

Iterate Array and render the components

Add Bootstrap Card to render List Items

Creating Header Component

Error Handling with Custom ErrorMessage Component

Adding Loading Spinner

React Context API

Introduction to React Context API

React Context API in Action

Create Reducer to update the State in React Context

Create new Action to Handle Errors

Working with Forms in React

Creating Controlled Component

Adding State to the Form

Save new record by sending Http Request

Creating Reusable Component for Input FormControl

Adding Form Validations in React and Bootstrap

Add Routing in React using React – Router

Add Link Navigations using React-Router

Redirect after submitted new Record

Creating NotFound Component

Creating new Component to Edit the Record

State Management with Redux

Setting up Redux into React application

Connect React Component to Redux

Delete the Record from the ReduxStore

Add Record to ReduxStore

Consuming Http Rest API using Async Action Creators

Create Async Action to fetch records from the API

Create Async Action to delete records from the API

Create Async Action to add new Record

Async Action to fetch single record

Async Action to update the Link

Integrating React and Redux with Firebase

Creating Database on Firebase

Fetching data from firebase collection in react component

Delete document from firebase collection with react

Add document in firebase collection with react

Update document from firebase collection

Firebase Authentication with React and Redux

User Registration in React and Firebase