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

Cover Page....2

Table of Contents....3

Preface....5

Taking Your First Steps with React....16

Technical requirements....16

Differentiating between declarative and imperative programming....18

How React elements work....21

Unlearning everything....23

Understanding JavaScript fatigue....26

Summary....30

Introducing TypeScript....32

Technical requirements....33

TypeScript’s features....33

Converting JavaScript code into TypeScript....34

Types....36

Interfaces....37

Extending interfaces and types....38

Implementing interfaces and types....39

Merging interfaces....40

Enums....41

Namespaces....42

Template literals....44

TypeScript configuration file....44

Summary....46

Cleaning Up Your Code....47

Technical requirements....48

Using JSX....48

Styling code....67

Functional programming....74

Summary....79

Exploring Popular Composition Patterns....81

Technical requirements....81

Communicating components....82

Exploring the container and presentational patterns....85

Understanding HOCs....91

Understanding FunctionAsChild....94

Summary....96

Writing Code for the Browser....97

Technical requirements....98

Understanding and implementing forms....98

Handling events....106

Exploring refs....109

Implementing animations....113

Exploring SVG....115

Summary....117

Making Your Components Look Beautiful....119

Technical requirements....119

CSS in JavaScript....120

Understanding and implementing inline styles....122

Using CSS modules....127

Setting up a project....128

Locally scoped CSS....135

Implementing styled-components....144

Summary....148

Anti-Patterns to Be Avoided....150

Technical requirements....150

Initializing the state using properties....151

Using indexes as a key....154

Spreading properties on DOM elements....157

Summary....159

React Hooks....161

Technical requirements....161

Introducing React Hooks....162

Rules of Hooks....164

Migrating a class component to React Hooks....165

Understanding React effects....171

Understanding the useReducer Hook....194

Summary....202

React Router....203

Technical requirements....203

Installing and configuring React Router....204

Creating our sections....205

Adding parameters to the routes....209

React Router v6.4....217

Summary....224

React 18 New Features....226

Concurrent mode....227

Automatic batching....229

Transitions....230

Suspense on the server....232

New APIs....233

New Hooks....237

Strict mode....242

Node.js latest features....243

Summary....246

Managing Data....247

Technical requirements....247

Introducing the React Context API....248

Consuming context with useContext....251

Introducing React Suspense with SWR....253

Redux Toolkit: a modern approach to Redux....265

Summary....268

Server-Side Rendering....269

Technical requirements....269

Understanding universal applications....270

Reasons for implementing SSR....271

Creating a basic example of SSR....276

Implementing data fetching....284

Using Next.js to create a React application....288

Summary....292

Understanding GraphQL with a Real Project....294

Technical requirements....295

Building a backend login system using PostgreSQL, Apollo Server, GraphQL, Sequelize, and JSON Web Tokens....295

Installing PostgreSQL....295

Creating our backend project....298

Configuring Apollo Server....301

Defining our GraphQL types, queries, and mutations....305

Creating our resolvers....308

Using the Sequelize ORM....312

Authentication functions....316

Running our project for the first time....321

Building a frontend login system with Apollo Client....344

Summary....373

MonoRepo Architecture....374

Technical requirements....375

Advantages of a monorepository and the problems it solves....375

Creating a MonoRepo with NPM Workspaces....378

Implementing TypeScript in our MonoRepo....382

Creating a devtools package to compile packages with Webpack....386

Creating the utils package....398

Creating the API package....406

Creating the frontend package....429

Summary....455

Improving the Performance of Your Applications....457

Technical requirements....458

How reconciliation works....458

Using keys....460

Optimization techniques....461

Tools and libraries....463

Summary....465

Join our community on Discord....466

Testing and Debugging....467

Technical requirements....467

Understanding the benefits of testing....468

Painless JavaScript testing with Jest....470

Introducing Vitest....478

Using React DevTools....489

Summary....490

Deploying to Production....492

Technical requirements....492

Creating our first DigitalOcean Droplet....492

Configuring nginx, PM2, and a domain....507

Implementing CircleCI for continuous integration....513

Summary....526

Other Books You May Enjoy....527

Index....532

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.