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

Table of contents :
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

Polecaj historie

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with React by leveraging industry-best practices, 4th Edition 9781803233109, 1803233109

Dive in and discover how to build awesome React web apps that you can scale and maintain using design patterns and the l

537 22 5MB Read more

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with React by leveraging industry-best practices [4 ed.] 1803233109, 9781803233109

Dive in and discover how to build awesome React web apps that you can scale and maintain using design patterns and the l

2,657 186 13MB Read more

React Design Patterns and Best Practices: Design, build & deploy production-ready web apps using standard industry practices 9781789530179

Build modular React web apps that are scalable, maintainable and powerful using design patterns and insightful practices

5,535 1,143 7MB Read more

REACT 17 DESIGN PATTERNS AND BEST PRACTICESTHIRD EDITION : design, build, and deploy... production-ready web applications using industry-s. [3 ed.] 9781800560444, 1800560443

2,148 909 22MB Read more

Hands-on Design Patterns and Best Practices with Julia 9781838646615

891 75 20MB Read more

Java EE 8 Design Patterns and Best Practices 9781788830621

3,840 965 10MB Read more

Hands-on Design Patterns and Best Practices with Julia 9781838648817

1,781 443 22MB Read more

Full-Stack Flask and React: Learn, code, and deploy powerful web applications with Flask 2 and React 18 9781803248448

Embark on an immersive journey from user interface interaction, data modeling, API development and documentation to depl

225 97 11MB Read more

Ultimate Full-Stack Web Development with MERN: Design, Build, Test and Deploy Production-Grade Web Applications with MongoDB, Express, React and NodeJS 9788119416424

Elevate Your Web Testing with Practical Insights and Advanced Techniques. Key Features ? Step-by-step learning curve fr

153 98 17MB Read more

Hands-On Design Patterns with C++: Solve common C++ problems with modern design patterns and build robust applications 1788832566, 9781788832564

C++ is a general-purpose programming language designed with the goals of efficiency, performance, and flexibility in min

7,211 2,800 4MB Read more