React new

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

JSX

Introduction

What Is JSX?

Props in JSX

Spread Attributes

Events

React Data Flow

JSX and HTML

Unscaping Content

Child Expressions and Elements

Component

Introduction

What is a Component

Defining a Component

Rendering a Component

Bootstrapping the component

props

Class component

Component Lifecycle

State

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

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

Events

Introduction

Events

DOM Events

preventDefault

Component Events

 

 

 

 

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

Routing

Setting up React-Router

Links

Switch

Passing Route Parameters

Redirecting Requests

Conditional Redirects

Handling 404

 

 

 

 

 

 

 

 

Subscribing to State

Upgrading Dependencies

SetState Function

External State

Pass State to Child Components

Refactoring

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

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

Build and Build Tools

Babel

NPM

Webpack

Creating a Production Build