React and Libraries: Your Complete Guide to the React Ecosystem

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