React JS

Introduction & Agenda

Introduction to DOM Render Process & Performance

Introduction to Virtual DOM

Introduction

• Let vs Var vs Const
• Arrow Functions
• ES6 Classes
• ES6 Modules
• Destructuring
• Template Literals
• Rest & Spread
• Enhanced Object Literals
• Default Arguments
• Parameter Context Matching

Your First React Application

• Preparing the Development Environment
• Understanding the React Project Structure
• Understanding the Application Code Folder
• Understanding the Packages Folder
• Using the React Development Tools
• Understanding the Compilation and Transformation Process
• Understanding the Development HTTP Server
• Understanding Static Content
• Understanding the Error Display
• Understanding the Linter
• Configuring the Development Tools
• Debugging React Applications
• Exploring the Application State
• Using the Browser Debugger
• Installing the create-react-app Package
• Creating the Project
• Understanding the Project Structure
• Adding the Bootstrap CSS Framework
• Starting the Development Tools
• Replacing the Placeholder Content
• Displaying Dynamic Content
• Understanding Components
• Rendering HTML Content
• Rendering Other Components
• Understanding Props
• Defining Props in the Parent Component
• Receiving Props in the Child Component
• Combining JavaScript and Props to Render Content
• Selectively Rendering Content
• Rendering Arrays
• Rendering Multiple Elements
• Rendering No Content
• Attempting to Change Props
• Using Function Props
• Invoking Prop Functions with Arguments
• Passing on Props to Child Components
• Passing On All Props to Child Components
• Providing Default Prop Values
• Type Checking Prop Values
• Understanding State Data Changes
• Adding the To-Do Application Features
• Displaying the To-Do Items
• Introducing Additional Components
• Using the Child Components
• Adding the Finishing Touches
• Managing the Visibility of Completed Tasks
• Persistently Storing Data

E–Commerce App – Part 1

• Preparing the Project
• Installing Additional NPM Packages
• Adding the CSS Stylesheets to the Project
• Preparing the Web Service
• Running the Application
• Creating the Data Store
• Creating the Data Store Actions and Action Creators
• Creating the Shopping Features
• Creating the Product and Category Components
• Connecting to the Data Store and the URL Router
• Adding the Shop to the Application
• Improving the Category Selection Buttons
• Adding the Shopping Cart
• Extending the Data Store
• Creating the Cart Summary Component
• Adding the Cart Detail Component
• Adding the Cart URL to the Routing Configuration

E–Commerce App – Part2 - REST and Checkout

• Consuming the RESTful Web Service
• Creating a Configuration File
• Creating a Data Source
• Extending the Data Store
• Updating the Action Creator
• Paginating Data
• Understanding the Web Service Pagination Support
• Changing the HTTP Request and Action
• Creating the Data Loading Component
• Updating the Store Connector Component
• Updating the All Category Button
• Creating the Pagination Controls
• Adding the Checkout Process
• Extending the REST Data Source and the Data Store
• Creating the Checkout Form
• Simplifying the Shop Connector Component

E–Commerce App – Part 3 - Administration

• Running the Application
• Understanding GraphQL
• Creating a GraphQL Service
• Defining the GraphQL Schema
• Defining the GraphQL Resolvers
• Updating the Server
• Creating the Order Administration Features
• Defining the Order Table Component
• Defining the Connector Component
• Configuring the GraphQL Client
• Configuring the Mutation
• Creating the Product Administration Features
• Connecting the Product Table Component
• Creating the Editor Components
• Updating the Routing Configuration

E–Commerce App – Part 4 - Authentication and Deployment

• Adding Authentication for GraphQL Requests
• Understanding the Authentication System
• Creating the Authentication Context
• Creating the Authentication Form
• Guarding the Authentication Features
• Adding a Navigation Link for the Administration Features
• Preparing the Application for Deployment
• Enabling Lazy Loading for the Administration Features
• Creating the Data File
• Configuring the Request URLs
• Building the Application
• Creating the Application Server
• Testing the Production Build and Server

Stateful Components

• Understanding the Different Component Types
• Understanding Stateless & Stateful Components
• Creating a Stateful Component
• Understanding the Component Class
• Understanding the Import Statement
• Understanding the render Method
• Understanding Stateful Component Props
• Reading State Data
• Modifying State Data
• Avoiding the State Data Modification Pitfalls
• Defining Stateful Components Using Hooks
• Lifting Up State Data
• Defining Prop Types and Default Values

Reconciliation and Lifecycles

• Creating the Components
• Understanding How Content Is Rendered
• Understanding the Update Process
• Understanding the Reconciliation Process
• Understanding List Reconciliation
• Explicitly Triggering Reconciliation
• Understanding the Component Lifecycle
• Understanding the Mounting Phase
• Understanding the Update Phase
• Understanding the Unmounting Phase
• Using the Effect Hook
• Using the Advanced Lifecycle Methods
• Preventing Unnecessary Component Updates
• Setting State Data from Prop Values

Forms and Validation

• Defining the Components
• Starting the Development Tools
• Using Form Elements
• Using Select Elements
• Using Radio Buttons
• Using Checkboxes to Populate an Array
• Using Text Areas
• Validating Form Data
• Defining the Validation Rules
• Creating the Container Component
• Displaying Validation Messages
• Applying the Form Validation
• Validating Other Element and Data Types
• Performing Whole-Form Validation

Using the Data Store APIs

• Understanding Redux
• Using the Redux Data Store API
• Obtaining the Data Store State
• Observing Data Store Changes
• Dispatching Actions
• Creating a Connector Component
• Enhancing Reducers
• Using Data Store Middleware
• Enhancing the Data Store
• Applying the Enhancer
• Using the React-Redux API
• Advanced Connect Features

Unit Testing

• Creating Components
• Running the Application
• Running the Placeholder Unit Test
• Testing a Component Using Shallow Rendering
• Testing a Component with Full Rendering
• Testing with Props, State, Methods, and Events
• Testing the Effect of Methods
• Testing the Effects of an Event
• Testing the Interaction between Components