Table of Contents
About the Author
About the Technical Reviewer
Introduction
Chapter 1: Learn React Basic Concepts
Getting Started with React
What Is React?
Why React?
Installing an IDE
Why Do I Even Need an IDE?
How to Install VS Code?
Creating a Minimalistic Stand-Alone “Hello World” Program
What Is JSX, and Why Do We Need It?
DOM
React Virtual DOM Under the Hood
Babel and ES5/ES6
Getting Started with TypeScript
Why Should You Integrate TypeScript into Your React Project?
TypeScript vs. JavaScript: What’s the Big Deal?
TypeScript Cheat Sheet
React Template Starter Project Options
Summary
Chapter 2: Starter React Project and Friends
Getting Started with the Create-React-App Starter Project
React Developer Road Map
How Can I Integrate These Tools into My ReactJS Project?
Prerequisites
Install Node and NPM on a Mac/PC
Download the Libraries: Yarn or NPM
Install Yarn on a Mac/PC
Create-React-App MHL Template Project
Vanilla-Flavor Create-React-App
react-scripts
Gitignore
Public Folder
Create-React-App with TypeScript
CRA Template with TypeScript
CSS Preprocessors: Sass/SCSS
Redux Toolkit/Recoil
Material-UI CSS Framework
Styled Components
React Router
Jest and Enzyme + Sinon
Sinon
E2E Testing: Jest and Puppeteer
Component Folder Structure
Generate Templates
Linting: ESLint and Prettier
Other Useful Libraries
Classnames
Prop-types
Additional Useful Utilities
Summary
Chapter 3: React Components
What Are React Components?
JavaScript Function and Class Components
JavaScript Functional Components
Javascript Class Component
React Hooks
TypeScript Components
Pure Functions
Pure Functions with Side Effects
TypeScript Function Components
TypeScript Class Components
Exotic Components: Factory Components
Complex TS Function Components
Extending props for Router
Extending props for Material-UI Styles
Extending props Inheritance on Your Own
Using Pure Components As Much As Possible
Re-re-re-re-render
Summary
Chapter 4: React Router and Material-UI
Integrate React Router
Why Do We Need a Router?
How Can We Integrate React Router into the ReactJS Project?
Step 1: Scaffolding
Step 2: Showing views, where we create the route logic and linking
Integrate the Material-UI CSS Framework
Why Do We Need a CSS Framework?
How Can We Integrate Material-UI into Our ReactJS Project?
Let’s Get Started
HeaderTheme Component
Header Subcomponent
HeaderTopNav Subcomponent
React Event Handlers
HeaderDrawer Subcomponent
Header.scss
Footer.scss
Pages scss
AppRouter.tsx
Summary
Chapter 5: State Management
State Management Architecture
Why Do We Need a State Management Architecture?
Facebook Solution: Flux
What Is MVC and What Does It Solve?
Vanilla Redux
Why Redux
How Can You Learn Redux?
Step 1: Set Up the Project
Step 2: Create a Redux Cycle
Redux Actions
Reducers
Step 3: Redux Store
Step 4: Invoke an Action
Let’s Recap
Redux Toolkit
Redux Toolkit Under the Hood
Implementing a Theme Using the Redux Toolkit
Model Enumeration Object: preferencesObject
Model Index File
Set the Theme as a Global Style: index.scss
Create a State Slice: preferencesSlice.ts
Redux Toolkit Store
Footer Architecture
Footer Subcomponent
Footer.styles.ts Styled Component
FooterTheme Wrapper Parent Component
HeaderTheme Parent Component
Header Subcomponent
HeaderTopNav Subcomponent
HeaderDrawer Subcomponent
AppRouter Refactoring
Redux DevTools Extension
Summary
Chapter 6: MERN Stack: Part I
Update Preferences with Recoil
What Is the MERN Stack?
What Is Recoil?
Why Use Recoil?
Share the User’s Preference State with Recoil
Implementing Recoil
Updating preferencesObject
Preferences Atom
Session Atom
Refactoring the View Layer
UserButton Subcomponent
UserListButton Component
HeaderTheme Component Changes
Header Subcomponents
Header Subcomponent
HeaderTopNav Subcomponent
HeaderDrawer Subcomponent
Footer Component Refactoring
FooterTheme Component
Footer Subcomponent
AppRouter Component
What Is RecoilRoot?
Suspense Tag
Create a Members-Only Area with the MERN Stack
How Do We Build a Members-Only Area with the MERN Stack?
Front End
Toast Message Component
toastObject Model
Recoil: Toast Atom
Toast Component
Toast.scss
ToastNotification Subcomponent
ToastNotification.scss
AppRouter Component Refactoring
Exclusive Members Area
userObject Model
Login Recoil Logic
User Atom
Recoil User Selector
Login Components
LoginForm.styles.ts
LoginForm
Login Page
Center Content Component
LoginPage Component
LoginPageInner and Subcomponents
SubmitUserForm Subcomponent
onSuccessLogin Logic
onFailLogin Logic
Members Page
MembersHome
MembersPage
Summary
Chapter 7: MERN Stack: Part II
What We’ll Be Building
Why Node.js?
Why Express?
Why Should You Use MongoDB?
Building the Back End
Database Schema
Validate Service API
Express Framework
Local MongoDB
Setting Up MongoDB Authentication
Full Login Register System
Register Model
Register Atom
Register Selector
Refactor Login
Register View Layer
Register Form
Register Form Style
Register Page
Refactor AppRouter
Register User Service API
Summary
Chapter 8: React Deployment: MERN Stack
Setting Up a Git Repo for Your Projects
Setting Up a Ubuntu Server as a Production Server
Why Ubuntu Server?
Ubuntu 16.04, 18.04, or 20.04?
How to Install the MERN on Ubuntu 18.04/20.04?
Setting Up the Ubuntu Server for MERN
Step 1: Roll Out an Ubuntu Server
Step 2: Set Up SSH and Install the Software and Upgrades
Step 3: Install MongoDB
MongoDB Client
Step 4: Set Up Authentication
Connecting to the Secure MongoDB
Removing the User
Changing the Storage Location
Step 5: Set Up SSL
Renewing the Certificate
443 Security
Publishing with the Grunt Script
Why Grunt?
Grunt vs. Gulp vs. Webpack vs. NPM Scripts
How to Publish Your Script with Grunt?
Publishing Content with Grunt
Step 1: Publishing the Front End
Step 2: Publish Back-End Code to the Remote Server
The Default Task
The upload-app Task
The node-restart Task
Summary
Chapter 9: Testing Part I: Unit Test Your React App
Setting Up the Project
What Is the Jest Library?
What Is Jest-dom?
What Is Enzyme?
What Is Sinon?
Why Should You Learn Jest and Enzyme?
How Can You Learn Jest and Enzyme?
Creating and Testing the Calculator Component
Step 1: Setting Up and Configuring Our Project
Step 2: Creating Our Custom Component
Step 3: Testing the Code
Setting Up an Adapter
Setting Up a Snapshot with enzyme-to-json
Testing App Component: App.test.tsx
Testing the Router Component: AppRouter.test.tsx
Creating Our Calculator Component Test File
A Single Test for Noninteractive Components
Snapshot Test Suite
Test Component Props
Testing an Interactive Button
Testing a Suite to Test a Function Directly
Testing an Interactive Button and Our State
Testing Using a Spy
Under the Hood
Mounting
Shallow
Render
enzyme-to-json
Jest Matchers
Sinon Library
Testing Router Pages
Summary
Chapter 10: Testing Part II: Development and Deployment Cycle
Performing End-to-End Testing
Why Should you Care About E2E Testing?
Why TypeScript?
Why Puppeteer?
Why Jest and Jest Puppeteer?
How Can I Integrate E2E Testing into My CRA React App?
Step 1: Setting Up and Configuring Our Project
Configuring Our Project
jest-puppeteer.config.js
.env
tsconfig.json
.eslintignore
e2e/jest.config.js
e2e/global.d.ts
package.json
Step 2: Writing Code
e2e/puppeteer_standalone.js
e2e/app.test.tsx
Step 3: Performing E2E Testing
Automating Development and Using a Continuous Integration Cycle
Motivation
Structure
Setting Up the Project
Testing
Coverage
Setting Up Git Hooks with Husky
Setting Up a Workflow with GitHub Actions
Main Action: main.yml
Build Action: build.yaml
Test Action: test.yaml
Lint Action: lint.yml
Test Coverage with Codecov.io
Why Codecov?
CI with Travis
Why Travis?
Tracking Code Coverage with Coveralls
Why Coveralls?
Checking the Quality of Your Code with DeepScan
Why DeepScan?
Summary
Chapter 11: Debug and Profile Your React App
Debugging Your React App
Breakpoints
Debugging a React App with Visual Studio Code
Debugging a React App on WebStorm
Using the Console
Using a Debugger Statement
Debugging Jest Tests
Debugging Jest Tests with Chrome DevTools
Debugging Jest Tests with the VS Code IDE
Debugging Jest Tests with WebStorm
Using Chrome DevTools
Viewing the DOM Elements
Setting Breakpoints on DOM Changes
Using Chrome DevTools Extensions
What Are Chrome DevTools Extensions?
Chrome DevTools Extension: React Developer Tools
Chrome DevTools Extension: Realize for React
Chrome DevTools Extension: Recoil
Using a Web Proxy
Using Charles
Using a Network Protocol Analyzer
Wireshark
Profiling Your React App
How to Profile My React App?
Activity Monitor/Windows Task Manager
Browser’s Profiling Tools
Chrome DevTools’ Performance Tab
Chrome DevTools Extension: Profiler in React Developer Tools
React Profiler API
Summary
Chapter 12: Optimize Your React App
Why Do We Need to Optimize?
What Will You Learn?
How Can I Optimize My App?
Analyzer Bundle
Use PureComponent as a Class Component As Much As Possible
Re-re-re-re-render
Lazy Loading
Prerendering Static Pages
How to Get react-helmet to Generate a Title for Each Page?
Precache: Working Offline
What Does It Mean?
How Is Your App Working Offline?
Code Splitting
Dynamically Import
Module Federation
Tree Shaking
Import Required Modules vs. Using an import Statement with No Specifiers
Reducing Media Size
Prefetching
Cleaning Up Unused Event Handlers
Setting Up Side Effects in the useEffect Hook
Cleaning Up Side Effects
My Final Notes
Summary
Index