Practical Enterprise React: Become an Effective React Developer in Your Team

Table of Contents
About the Authors
About the Technical Reviewer
Introduction
Chapter 1: Getting Ahead in React
	React Primer
		Component-Based Architecture
		Document Object Model (DOM)
		Client-Side Rendering and Server-Side Rendering
		Unidirectional Flow/One-Way Data Binding
	Why React?
	Career Opportunities in React
	Summary
Chapter 2: Getting Started with the Node Package Manager
	Node Package Manager Overview
	Node Version Manager
	Installing Packages
		Node Packaged Modules
		Package.json and Package-lock.json
		Semantic Versioning or Semver
	Yarn
	Summary
Chapter 3: Getting Started with React Function Components and TypeScript
	Creating a create-react-app App
	Declaration Files for TypeScript with React
		The Typings in TypeScript
	Understanding React Function Components with Props
	The Added IntelliSense in the Code Editor
	React Hooks
		React Hooks: useState
		React Hooks: useEffect
	Summary
Chapter 4: Setting Up an Enterprise-Level App
	How to Select a Good Boilerplate
		Pros of Using a Boilerplate
		Cons of Using a Boilerplate
	Cloning a Boilerplate
	React Boilerplate Meets CRA
		Husky
		Dependencies
		A Closer Look at Some Dependencies
		Types Dependencies
	Setting Up Your Visual Studio Code (Hybrid Text Editor)
	Summary
Chapter 5: Navigating React Router
	Why React Router?
	Why Material-UI?
	Getting Started
		Basics Recap
	Creating routes.tsx
	Building a Dashboard
		Navigation Bar
			Adding Navigation Links
		Navigating React Router: 
			Adding the Container-Style Class Component
	Creating the Dashboard Layout
		Navigating Path: 
		React Hook: useRouteMatch
	Dashboard Component
		Render Props
	Going into React.lazy()
		React Suspense
		Eager Loading vs. Lazy Loading
	Summary
Chapter 6: Writing Local States, Sending HTTP Requests, and ApexCharts
	Strict Type-Checking Options in TypeScript
	Adding Fake Data Using json-server
	Sending HTTP Requests Using Axios
		Shaping the Object
		Making Requests with Axios
	Installing ApexCharts
		Creating the Main Layout
		Using React Feather Icons
	Summary
Chapter 7: Writing Data Tables, Formik Forms, and Yup Validations
	Component Overview
		Form Handling
		Formik
		Yup
	Data Tables
		Product Create View
		Product Create Form
		Product List View
	Updating the Routes
	Updating the Sidebar Dashboard
	Creating a Collapsible Sidebar Menu
	Cleaning Up a Bit…
	Defining Type Alias of ProductType
	Creating the Products Endpoint
	Creating the Products Service
		Updating the db.json Data
		Sending an HTTP Request
		Refactoring the ProductListView
		Creating Additional UI Styling
	Summary
Chapter 8: Writing Data Tables, Formik Forms, and Yup Validations: Part 2
	Updating the ProductCreateView
	Updating the ProductCreateForm
	Installing React Quill
	Installing React Dropzone
	Installing a Notification Library
	Updating Product Create Form
		For Your Activity
	Summary
Chapter 9: Managing State Using Redux with Redux Toolkit
	Redux Overview
		Why Use Redux?
	Redux Toolkit
	The Flow of Redux State Management
		Using RTK in CodeSandbox
	Summary
Chapter 10: Setting Up Redux Toolkit and Dispatching an Asynchronous Action
	Creating the Calendar View Component
		Updating the Routes
		Updating the Dashboard Sidebar Nav
		Reducers
	Cleanup Time
	Updating Axios
	Implementing Redux Toolkit
	Non-asynchronous Actions/Synchronous Actions
	Asynchronous Actions
	Updating the Root Reducer
		Updating the CalendarView
	Summary
Chapter 11: Creating, Deleting, and Updating Events on FullCalendar Using RTK
	Installing Moment and FullCalendar
		Updating the Root Component
		Updating the calendarSlice
			Creating the Event Actions
			Adding the Non-async Actions
		Updating the CalendarView
		Creating the Header Component
			Creating an Add Edit Event Form Using Formik
		Updating the CalendarView
		Updating the Header
		Updating the CalendarView
			Checking the UI of CalendarView
			Checking the Chrome DevTools
			Checking the Redux DevTools
		Creating the Toolbar
		Styling the CalendarView
			Checking the FullCalendar in the UI
			Checking the Chrome DevTools and Redux DevTools
	Summary
Chapter 12: Protecting Routes and Authentication in React
	Setting Up the Fake Server
		db.json
		API: Login and Register
		authService
	Setting Up the Login Form
	Creating a Register Form
	Adding the Login Page
	Updating the Routes
	JSON Web Token (JWT)
	Creating a ProtectedRoute Component
	Updating the Routes.tsx
	Updating the Dashboard Sidebar Navigation
	Time to Test
	Summary
Chapter 13: Writing a Profile Form and Syncing It to Components
	Creating the Claims Type
		Creating the User Type
	Adding APIs: Users and UsersDb
		Creating the userDbService
		Updating the authService
	Another Way of Using Redux
		Creating the profileActionTypes
		Creating the profileAsyncActions
		Creating the profileSlice
	Adding profileReducer to the Reducers
	Creating the authSlice
	Adding the authSlice to the Reducers
		Installing JWT-decode
		Updating the ProtectedRoute
	Updating the Login Form
	Updating the Register Form
		Creating the Header Profile
	Updating the Navigation Bar
	Creating the AccountView
		Adding Images
		Creating the Pricing Page
	Updating the Routes
	Summary
Chapter 14: Updating the Dashboard Sidebar Navigation
	Updating the db.json
	Updating the Dashboard Sidebar Navigation
	Creating the Yup Profile Validation
	Creating the AccountView Page
	Creating the Profile Details
	Creating General Settings
	Creating the Header
	Summary
Chapter 15: Creating the Notifications, Security, and Subscription Pages
	Creating the Notifications Page
	Creating the Security Page
	Creating the Subscription Page
	Updating the AccountView
	Refresh
	Summary
Chapter 16: Making the App Mobile-Friendly
	Getting Started
	Updating a Package Library Safely
	Updating the HomePage
	Updating the About Page
	Updating the Not Found Page
	Making the Navbar Mobile-Friendly
	Making the Dashboard Sidebar Navigation Mobile-Friendly
	Making the Dashboard Layout Mobile-Friendly
	Summary
Chapter 17: Styling Methods for React Components
	Inline Styling
	Plain CSS
	Global CSS
	CSS Modules
	CSS-in-JS
		Styled-Components Library
	Emotion in React
	Summary
Chapter 18: Deploying React in Netlify and in Docker
	GitHub
	Netlify
	Docker
	Docker Ignore
	NGINX Config
		Dockerfile
		RUN npm install
		Copy . ./
		Docker Hub
		Docker Commands
	Summary
Index