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 Design Patterns and Best Practices
Michele Bertoli
Jan, 2017 | 318 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
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

Introducing TypeScript

This chapter assumes that you have prior experience with JavaScript and are interested in improving the quality of your code by learning TypeScript. TypeScript is a typed superset of JavaScript that compiles to JavaScript. In other words, TypeScript is essentially JavaScript with some additional features.

Designed by Anders Hejlsberg, the creator of C# at Microsoft, TypeScript is an open-source language that enhances the capabilities of JavaScript. By introducing static typing and other advanced features, TypeScript helps developers write more reliable and maintainable code.

In this chapter, we will explore the features of TypeScript and how to convert existing JavaScript code to TypeScript. By the end of this chapter, you will have a solid understanding of TypeScript’s benefits and how to leverage them to create more robust and scalable applications.

In this chapter, we will cover the following topics:

  • TypeScript’s features
  • Convert JavaScript code into TypeScript
  • Types
  • Interfaces
  • Extending interfaces and types
  • Implementing interfaces and types
  • Merging interfaces
  • Enums
  • Namespaces
  • Template literal types
  • TypeScript configuration file
Previous Section
End of Section 1
Next Section