Book Image

React 18 Design Patterns and Best Practices - Fourth Edition

By : Carlos Santana Roldán
4.2 (6)
Book Image

React 18 Design Patterns and Best Practices - Fourth Edition

4.2 (6)
By: Carlos Santana Roldán

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
React 18 Design Patterns and Best Practices - Fourth Edition
Carlos Santana Roldán
Jul, 2023 | 524 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Small book image
React Interview Guide
Sudheer Jonna | Andrew Baisden
Nov, 2023 | 346 pages
Small book image
Isomorphic JavaScript Web Development
Konstantin Tarkus | Tomas Alabes
Oct, 2017 | 226 pages
Table of Contents (20 chapters)
Preface
Preface
Who this book is for
What this book covers
Get in touch
1
Taking Your First Steps with React
Taking Your First Steps with React
Technical requirements
Differentiating between declarative and imperative programming
How React elements work
Unlearning everything
Understanding JavaScript fatigue
Summary
Free Chapter
2
Introducing TypeScript
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
3
Cleaning Up Your Code
Cleaning Up Your Code
Technical requirements
Using JSX
Styling code
Functional programming
Summary
4
Exploring Popular Composition Patterns
Exploring Popular Composition Patterns
Technical requirements
Communicating components
Exploring the container and presentational patterns
Understanding HOCs
Understanding FunctionAsChild
Summary
5
Writing Code for the Browser
Writing Code for the Browser
Technical requirements
Understanding and implementing forms
Handling events
Exploring refs
Implementing animations
Exploring SVG
Summary
6
Making Your Components Look Beautiful
Making Your Components Look Beautiful
Technical requirements
CSS in JavaScript
Understanding and implementing inline styles
Using CSS modules
Setting up a project
Locally scoped CSS
Implementing styled-components
Summary
7
Anti-Patterns to Be Avoided
Anti-Patterns to Be Avoided
Technical requirements
Initializing the state using properties
Using indexes as a key
Spreading properties on DOM elements
Summary
8
React Hooks
React Hooks
Technical requirements
Introducing React Hooks
Rules of Hooks
Migrating a class component to React Hooks
Understanding React effects
Understanding the useReducer Hook
Summary
9
React Router
React Router
Technical requirements
Installing and configuring React Router
Creating our sections
Adding parameters to the routes
React Router v6.4
Summary
10
React 18 New Features
React 18 New Features
Concurrent mode
Automatic batching
Transitions
Suspense on the server
New APIs
New Hooks
Strict mode
Node.js latest features
Summary
11
Managing Data
Managing Data
Technical requirements
Introducing the React Context API
Consuming context with useContext
Introducing React Suspense with SWR
Redux Toolkit: a modern approach to Redux
Summary
12
Server-Side Rendering
Server-Side Rendering
Technical requirements
Understanding universal applications
Reasons for implementing SSR
Creating a basic example of SSR
Implementing data fetching
Using Next.js to create a React application
Summary
13
Understanding GraphQL with a Real Project
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
Creating our backend project
Configuring Apollo Server
Defining our GraphQL types, queries, and mutations
Creating our resolvers
Using the Sequelize ORM
Authentication functions
Running our project for the first time
Building a frontend login system with Apollo Client
Summary
14
MonoRepo Architecture
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 the utils package
Creating the API package
Creating the frontend package
Summary
15
Improving the Performance of Your Applications
Improving the Performance of Your Applications
Technical requirements
How reconciliation works
Using keys
Optimization techniques
Tools and libraries
Summary
Join our community on Discord
16
Testing and Debugging
Testing and Debugging
Technical requirements
Understanding the benefits of testing
Painless JavaScript testing with Jest
Introducing Vitest
Using React DevTools
Summary
17
Deploying to Production
Deploying to Production
Technical requirements
Creating our first DigitalOcean Droplet
Configuring nginx, PM2, and a domain
Implementing CircleCI for continuous integration
Summary
18
Other Books You May Enjoy
Other Books You May Enjoy
19
Index
Index

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you reported this to us. Please visit http://www.packtpub.com/submit-errata, click Submit Errata, and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packtpub.com.

Share your thoughts

Once you’ve read React 18 Design Patterns and Best Practices, Fourth Edition, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

  1. Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-80323-310-9

  1. Submit your proof of purchase
  2. That’s it! We’ll send your free PDF and other benefits to your email directly
Previous Section
Next Chapter