Dive in and discover how to build awesome React web apps that you can scale and maintain using design patterns and the latest industry insights
Purchase of the print or Kindle book includes a free PDF eBook
Key Features Discover and unpack the latest React 18 and Node 19 features in this updated fourth edition Get up to speed with TypeScript, MonoRepo architecture, and several cutting-edge React tools Learn from plenty of real-world examples and an improved chapter flow Book Description React helps you work smarter, not harder — but to reap the benefits of this popular JavaScript library and its components, you need a straightforward guide that will teach you how to make the most of it.
React 18 Design Patterns and Best Practices will help you use React effectively to make your applications more flexible, easier to maintain, and improve their performance, while giving your workflow a huge boost. With a better organization of topics and knowledge about best practices added to your developer toolbox, the updated fourth edition ensures an enhanced learning experience.
The book is split into three parts; the first will teach you the fundamentals of React patterns, the second will dive into how React works, and the third will focus on real-world applications. All the code samples are updated to the latest version of React and you’ll also find plenty of new additions that explore React 18 and Node 19’s newest features, alongside MonoRepo Architecture and a dedicated chapter on TypeScript.
By the end of this book, you'll be able to efficiently build and deploy real-world React web applications.
What you will learn Get familiar with the new React 18 and Node 19 features Explore TypeScript's basic and advanced capabilities Make components communicate with each other by applying various patterns and techniques Dive into MonoRepo architecture Use server-side rendering to make applications load faster Write a comprehensive set of tests to create robust and maintainable code Build high-performing applications by styling and optimizing React components Who this book is for This book is for web developers who want to master React by learning key design patterns and best practices in real-world application development. You’ll need an intermediate-level experience with React and JavaScript before you get started.
Table of Contents Taking Your First Steps with React Introducing TypeScript Cleaning Up Your Code Exploring Popular Composition Patterns Writing Code for the Browser Making Your Components Look Beautiful Anti-Patterns to Be Avoided React Hooks React Router React 18 New Features Managing Data Server-Side Rendering Understanding GraphQL with a Real Project MonoRepo Architecture Improving the Performance of Your Applications Testing and Debugging Deploying to Production

lgli/9781803233109-REACT_18_DESIGN_PATTERNS_AND_BEST_PRACTICES.pdf

lgrsnf/9781803233109-REACT_18_DESIGN_PATTERNS_AND_BEST_PRACTICES.pdf

zlib/Computers/Web Development/CARLOS SANTANA. ROLDAN/React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications_25666811.pdf

React 18 Design Patterns and Best Practices : Design, Build, and Deploy Production-ready Web Applications with React by Leveraging Industry-best Practices

React 18 Design Patterns and Best Practices: Design, Build, and Deploy Production-Ready Web Applications with Ease and Create Powerful User Experiences

REACT 18 DESIGN PATTERNS AND BEST PRACTICESFOURTH EDITION : design, build, and deploy... production-ready web applications with ease and cr

React 18 Design Patterns and Best Practices - Fourth Edition

Carlos Santana Roldán

Packt Publishing, [Place of publication not identified], 2023

United Kingdom and Ireland, United Kingdom

Thanks Team-IRA

{"edition":"4","isbns":["1803233109","9781803233109"],"last_page":524,"publisher":"Packt Publishing"}

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

Dive in and discover how to build awesome React web apps that you can scale and maintain using design patterns and the latest industry insights
## Key Features
## Book Description
React 18 Design Patterns and Best Practices will help you use React effectively to make your applications more flexible, easier to maintain, and improve their performance, while giving your workflow a huge boost. With a better organization of topics and knowledge about best practices added to your developer toolbox, the updated fourth edition ensures an enhanced learning experience.
By the end of this book, you'll be able to efficiently build and deploy real-world React web applications.
* Get familiar with the new React 18 and Node 19 features
* Explore TypeScript's basic and advanced capabilities
* Make components communicate with each other by applying various patterns and techniques
* Dive into MonoRepo architecture
* Use server-side rendering to make applications load faster
* Write a comprehensive set of tests to create robust and maintainable code
* Build high-performing applications by styling and optimizing React components
This book is for web developers who want to master React by learning key design patterns and best practices in real-world application development. You’ll need an intermediate-level experience with React and JavaScript before you get started.
1. Taking Your First Steps with React
2. Introducing TypeScript
3. Cleaning Up Your Code
4. Exploring Popular Composition Patterns
5. Writing Code for the Browser
6. Making Your Components Look Beautiful
7. Anti-Patterns to Be Avoided
8. React Hooks
9. React Router
10. React 18 New Features
11. Managing Data
12. Server-Side Rendering
13. Understanding GraphQL with a Real Project
14. MonoRepo Architecture
15. Improving the Performance of Your Applications
16. Testing and Debugging
17. Deploying to Production

2023-08-09