React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications [Team-IRA]

Cover
Copyright
Table of Contents
Preface
Chapter 1: Taking Your First Steps with React
	Technical requirements
	Differentiating between declarative and imperative programming
	How React elements work
	Unlearning everything
	Understanding JavaScript fatigue
		Misconceptions about React
		Getting started with React without the fatigue
		Advantages of the JavaScript ecosystem
		Bye to Create-React-App, welcome to Vite!
			Vite as a solution
	Summary
Chapter 2: Introducing TypeScript
	Technical requirements
	TypeScript’s features
	Converting JavaScript code into TypeScript
	Types
	Interfaces
	Extending interfaces and types
	Implementing interfaces and types
	Merging interfaces
	Enums
	Namespaces
	Template literals
	TypeScript configuration file
	Summary
Chapter 3: Cleaning Up Your Code
	Technical requirements
	Using JSX
		Babel
		Creating our first element
		DOM elements and React components
		Props
		Children
		Differences with HTML
			Attributes
			Style
			Root
			Spaces
			Boolean attributes
		Spread attributes
		Template literals
		Common patterns
			Multiline
			Multi-properties
			Conditionals
			Loops
			Sub-rendering
	Styling code
		EditorConfig
		Prettier
		ESLint
			Installation
			Configuration
			Git Hooks
	Functional programming
		First-class functions
		Purity
		Immutability
		Currying
		Composition
	Summary
Chapter 4: Exploring Popular Composition Patterns
	Technical requirements
	Communicating components
		Using the children prop
	Exploring the container and presentational patterns
	Understanding HOCs
	Understanding FunctionAsChild
	Summary
Chapter 5: Writing Code for the Browser
	Technical requirements
	Understanding and implementing forms
		Uncontrolled components
		Controlled components
	Handling events
	Exploring refs
		Understanding forwardRef
	Implementing animations
	Exploring SVG
	Summary
Chapter 6: Making Your Components Look Beautiful
	Technical requirements
	CSS in JavaScript
	Understanding and implementing inline styles
	Using CSS modules
		Webpack 5
	Setting up a project
	Locally scoped CSS
		Atomic CSS modules
	Implementing styled-components
	Summary
Chapter 7: Anti-Patterns to Be Avoided
	Technical requirements
	Initializing the state using properties
	Using indexes as a key
	Spreading properties on DOM elements
	Summary
Chapter 8: React Hooks
	Technical requirements
	Introducing React Hooks
		No breaking changes
		Using the State Hook
	Rules of Hooks
		Rule 1: Only call Hooks at the top level
		Rule 2: Only call Hooks from React functions
	Migrating a class component to React Hooks
	Understanding React effects
		Understanding useEffect
		Firing an effect conditionally
		Understanding useCallback, useMemo, and memo
			Memoizing a component with memo
			Memoizing a value with useMemo
			Memoizing a function definition with useCallback
			Memoizing a function passed as an argument in effect
	Understanding the useReducer Hook
	Summary
Chapter 9: React Router
	Technical requirements
	Installing and configuring React Router
	Creating our sections
	Adding parameters to the routes
	React Router v6.4
		React Router loaders
	Summary
Chapter 10: React 18 New Features
	Concurrent mode
	Automatic batching
	Transitions
	Suspense on the server
	New APIs
		createRoot
		hydrateRoot
		renderToPipeableStream
	New Hooks
		useId
		useTransition
		useDeferredValue
		useInsertionEffect
	Strict mode
	Node.js latest features
		Experimental Fetch API
		Experimental test runner module
		Experimental node watch
		Node 18 is now Long-Term Support (LTS)
	Summary
Chapter 11: Managing Data
	Technical requirements
	Introducing the React Context API
		Creating our first context
		Wrapping our components with the provider
	Consuming context with useContext
	Introducing React Suspense with SWR
		Introducing SWR
		Building a Pokedex!
			Testing React Suspense
	Redux Toolkit: a modern approach to Redux
		Key features
		Getting started
		Creating a store
		Creating a slice
		Combining reducers
		Connecting components to the store
		Integrating the store with a React application
	Summary
Chapter 12: Server-Side Rendering
	Technical requirements
	Understanding universal applications
	Reasons for implementing SSR
		Implementing SEO
		A common code base
		Better performance
		Don’t underestimate the complexity of SSR
	Creating a basic example of SSR
		Configuring our project from scratch with webpack
		Creating the application
	Implementing data fetching
	Using Next.js to create a React application
	Summary
Chapter 13: Understanding GraphQL with a Real Project
	Technical requirements
	Building a backend login system using PostgreSQL, Apollo Server, GraphQL, Sequelize, and JSON Web Tokens
	Installing PostgreSQL
		Best tools for PostgreSQL database management
	Creating our backend project
		Configuring our .env file
		Creating a basic config file
	Configuring Apollo Server
	Defining our GraphQL types, queries, and mutations
		Scalar types
		Queries
		Mutations
		Merging type definitions
	Creating our resolvers
		Creating the getUsers query
		Creating the getUser query
		Creating the mutations
		Merging our resolvers
	Using the Sequelize ORM
		Creating a user model in Sequelize
		Connecting Sequelize to a PostgreSQL database
	Authentication functions
		Creating JWT functions
		Creating authentication functions
		Defining types and interfaces
	Running our project for the first time
		Testing GraphQL queries and mutations
		Testing model validations and querying users
		Performing a login
	Building a frontend login system with Apollo Client
		Configuring Webpack 5
		Configuring our TypeScript
		Configuring the Express server
		Creating our frontend configuration
		Creating the user middleware
		Creating JWT functions
		Creating our GraphQL queries and mutations
		Creating user context to handle login and connected user
		Configuring Apollo Client
		Creating our app routes
		Creating our pages
		Creating our login components
		Creating our dashboard components
		Testing our login system
	Summary
Chapter 14: MonoRepo Architecture
	Technical requirements
	Advantages of a monorepository and the problems it solves
	Creating a MonoRepo with NPM Workspaces
	Implementing TypeScript in our MonoRepo
	Creating a devtools package to compile packages with Webpack
		Creating a colorful log
		Webpack common configuration
		Webpack development configuration
		Webpack production configuration
	Creating the utils package
	Creating the API package
		Creating a user-shared model
		Creating a user-shared GraphQL type and resolver
		Creating custom services
		Building our service configuration
		Creating our custom models
		Creating model seeds
		Creating our custom GraphQL types and resolvers
		Synchronizing our models and starting Apollo Server
		Testing our CRM service
	Creating the frontend package
		Creating our Sites system
		Creating our Page Switcher
		Creating our Login system
		Creating our sites configuration
		Putting everything together
		Demo time!
	Summary
Chapter 15: Improving the Performance of Your Applications
	Technical requirements
	How reconciliation works
	Using keys
	Optimization techniques
	Tools and libraries
		Immutability
		Babel plugins
	Summary
Chapter 16: Testing and Debugging
	Technical requirements
	Understanding the benefits of testing
	Painless JavaScript testing with Jest
		Testing events
	Introducing Vitest
		Installing and configuring Vitest
		Enabling globals
		In-source testing
	Using React DevTools
		Using Redux DevTools
	Summary
Chapter 17: Deploying to Production
	Technical requirements
	Creating our first DigitalOcean Droplet
		Signing up to DigitalOcean
		Creating our first Droplet
		Installing Node.js
		Configuring Git and GitHub
		Turning off our Droplet
	Configuring nginx, PM2, and a domain
		Installing and configuring nginx
		Setting up a reverse proxy server
		Adding a domain to our Droplet
	Implementing CircleCI for continuous integration
		Adding an SSH key to CircleCI
		Configuring CircleCI
		Creating environment variables variables in CircleCI
	Summary
Packt page
Other Books You May Enjoy
Index