HomeTrainingReact.js Training CourseReact.js Training Course Table of Contents

React.js Training Course Table of Contents

  1. ReactJS — Introduction…………………………………………………………………………………. 1

React versions…………………………………………………………………………………………………………………….. 1

Features…………………………………………………………………………………………………………………………….. 1

Benefits……………………………………………………………………………………………………………………………… 1

Applications……………………………………………………………………………………………………………………….. 1

  1. ReactJS — Installation…………………………………………………………………………………… 3

Toolchain……………………………………………………………………………………………………………………………. 3

The serve static server………………………………………………………………………………………………………… 4

Babel compiler……………………………………………………………………………………………………………………. 5

Create React App toolchain…………………………………………………………………………………………………. 5

  1. ReactJS — Architecture…………………………………………………………………………………. 7

Workflow of a React application………………………………………………………………………………………….. 7

Architecture of the React Application………………………………………………………………………………… 11

  1. React — Creating a React Application………………………………………………………………. 13

Using CDN………………………………………………………………………………………………………………………… 13

Using Create React App tool……………………………………………………………………………………………… 15

Files and folders……………………………………………………………………………………………………………….. 16

Source code of the application………………………………………………………………………………………….. 18

Customize the code………………………………………………………………………………………………………….. 19

Run the application…………………………………………………………………………………………………………… 20

Using custom solution………………………………………………………………………………………………………. 21

Using Rollup bundler…………………………………………………………………………………………………………. 21

Using Parcel bundler…………………………………………………………………………………………………………. 26

  1. React — JSX……………………………………………………………………………………………… 30

Expressions………………………………………………………………………………………………………………………. 30

Functions…………………………………………………………………………………………………………………………. 31

Attributes…………………………………………………………………………………………………………………………. 31

Expression in attributes…………………………………………………………………………………………………….. 32

  1. ReactJS — Component………………………………………………………………………………… 33

Creating a React component……………………………………………………………………………………………… 33

Creating a class component………………………………………………………………………………………………. 34

Creating a function component…………………………………………………………………………………………. 36

  1. React — Styling…………………………………………………………………………………………. 38

CSS stylesheet…………………………………………………………………………………………………………………… 38

Inline Styling…………………………………………………………………………………………………………………….. 39

CSS Modules…………………………………………………………………………………………………………………….. 40

  1. React — Properties (props)…………………………………………………………………………… 43

Create a component using properties………………………………………………………………………………… 43

Nested components………………………………………………………………………………………………………….. 48

Use components………………………………………………………………………………………………………………. 51

Component collection………………………………………………………………………………………………………. 53

  1. React — Event management…………………………………………………………………………. 59

Introduce events in Expense manager app…………………………………………………………………………. 64

  1. React — State Management………………………………………………………………………….. 69

What is state?…………………………………………………………………………………………………………………… 69

State management API……………………………………………………………………………………………………… 69

Stateless component………………………………………………………………………………………………………… 70

Create a stateful component…………………………………………………………………………………………….. 71

Introduce state in expense manager app……………………………………………………………………………. 74

State management using React Hooks……………………………………………………………………………….. 79

Create a stateful component…………………………………………………………………………………………….. 80

Introducing state in expense manager app…………………………………………………………………………. 82

Component Life cycle……………………………………………………………………………………………………….. 86

Working example of life cycle API………………………………………………………………………………………. 89

Life cycle api in Expense manager app……………………………………………………………………………….. 91

Component life cycle using React Hooks…………………………………………………………………………….. 92

React children property aka Containment………………………………………………………………………….. 95

Layout in component………………………………………………………………………………………………………… 98

Sharing logic in component aka Render props………………………………………………………………….. 100

Pagination………………………………………………………………………………………………………………………. 101

Material UI……………………………………………………………………………………………………………………… 111

  1. React — Http client programming…………………………………………………………………. 118

Expense Rest Api Server………………………………………………………………………………………………….. 118

The fetch() api………………………………………………………………………………………………………………… 122

  1. React — Form programming………………………………………………………………………… 129

Controlled component……………………………………………………………………………………………………. 129

Uncontrolled Component……………………………………………………………………………………………….. 137

Formik……………………………………………………………………………………………………………………………. 143

  1. React — Routing………………………………………………………………………………………. 152

Install React Router………………………………………………………………………………………………………… 152

Nested routing……………………………………………………………………………………………………………….. 154

Creating navigation…………………………………………………………………………………………………………. 154

  1. React — Redux………………………………………………………………………………………… 161

Concepts………………………………………………………………………………………………………………………… 161

Redux API……………………………………………………………………………………………………………………….. 162

Provider component……………………………………………………………………………………………………….. 163

  1. React — Animation…………………………………………………………………………………… 175

React Transition Group……………………………………………………………………………………………………. 175

Transition……………………………………………………………………………………………………………………….. 175

CSSTransition………………………………………………………………………………………………………………….. 179

TransitionGroup……………………………………………………………………………………………………………… 183

  1. React — Testing……………………………………………………………………………………….. 184

Create React app…………………………………………………………………………………………………………….. 184

Testing in a custom application……………………………………………………………………………………….. 185

  1. React — CLI Commands……………………………………………………………………………… 187

Creating a new application………………………………………………………………………………………………. 187

Selecting a template……………………………………………………………………………………………………….. 187

Installing a dependency…………………………………………………………………………………………………… 187

Running the application………………………………………………………………………………………………….. 188

  1. React — Building and Deployment………………………………………………………………… 189

Building………………………………………………………………………………………………………………………….. 189

Deployment……………………………………………………………………………………………………………………. 190

  1. React — Example……………………………………………………………………………………… 191

Expense manager API……………………………………………………………………………………………………… 191

Install necessary modules……………………………………………………………………………………………….. 193

State management…………………………………………………………………………………………………………. 199

List expenses………………………………………………………………………………………………………………….. 205

Add expense…………………………………………………………………………………………………………………… 209