Book Image

React 17 Design Patterns and Best Practices - Third Edition

By : Carlos Santana Roldán

2 (1)

Book Image

React 17 Design Patterns and Best Practices - Third Edition

2 (1)

By: Carlos Santana Roldán

Overview of this book

Filled with useful React patterns that you can use in your projects straight away, this book will help you save time and build better web applications with ease. React 17 Design Patterns and Best Practices is a hands-on guide for those who want to take their coding skills to a new level. You’ll spend most of your time working your way through the principles of writing maintainable and clean code, but you’ll also gain a deeper insight into the inner workings of React. As you progress through the chapters, you’ll learn how to build components that are reusable across the application, how to structure applications, and create forms that actually work. Then you’ll build on your knowledge by exploring how to style React components and optimize them to make applications faster and more responsive. Once you’ve mastered the rest, you’ll learn how to write tests effectively and how to contribute to React and its ecosystem. By the end of this book, you'll be able to avoid the process of trial and error and developmental headaches. Instead, you’ll be able to use your new skills to efficiently build and deploy real-world React web applications you can be proud of.

Preface

Who this book is for

What this book covers

To get the most out of this book

Hello React!

Free Chapter

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

Introducing TypeScript

Cleaning Up Your Code

Cleaning Up Your Code

Technical requirements

Functional programming

How React Works

How React Works

React Hooks

Technical requirements

Introducing React Hooks

Migrating a class component to React Hooks

Understanding React effects

Understanding useCallback, useMemo, and memo

Understanding the useReducer Hook

Exploring Popular Composition Patterns

Exploring Popular Composition Patterns

Technical requirements

Communicating components

Exploring the container and presentational patterns

Understanding HOCs

Understanding FunctionAsChild

Understanding GraphQL with a Real Project

Understanding GraphQL with a Real Project

Technical requirements

Installing PostgreSQL

Creating our .env file and configuration files

Configuring Apollo Server

Defining our GraphQL types, queries, and mutations

Merging our type definitions

Creating our resolvers

Merging our resolvers

Creating Sequelize models

Connecting Sequelize to a PostgreSQL database

Authentication functions

Running our project for the first time

Testing our GraphQL queries and mutations

Performing a login

Building a frontend login system with Apollo Client

Managing Data

Technical requirements

Introducing the React Context API

Introducing React Suspense with SWR

Writing Code for the Browser

Writing Code for the Browser

Technical requirements

Understanding and implementing forms

Handling events

Implementing animations

Performance, Improvements, and Production!

Performance, Improvements, and Production!

Making Your Components Look Beautiful

Making Your Components Look Beautiful

Technical requirements

CSS in JavaScript

Understanding and implementing inline styles

Exploring the Radium library

Using CSS modules

Implementing styled-components

Server-Side Rendering for Fun and Profit

Server-Side Rendering for Fun and Profit

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

Improving the Performance of Your Applications

Improving the Performance of Your Applications

Technical requirements

Optimization techniques

Tools and libraries

Testing and Debugging

Testing and Debugging

Technical requirements

Understanding the benefits of testing

Painless JavaScript testing with Jest

Using React DevTools

Using Redux DevTools

React Router

Technical requirements

Installing and configuring React Router

Creating our sections

Adding parameters to the routes

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

Deploying to Production

Deploying to Production

Technical requirements

Creating our first DigitalOcean Droplet

Configuring nginx, PM2, and a domain

Implementing CircleCI for continuous integration

Next Steps

Technical requirements

Contributing to React

Distributing your code

Publishing an npm package

About Packt

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Leave a review - let other readers know what you think

Customer Reviews

2 (1)

5 star

0

4 star

0

3 star

0

2 star

100%

1 star

0

Creating our first DigitalOcean Droplet

I have used DigitalOcean for the last six years and I can say that it is one of the best cloud services I have tried, not just because of the affordable costs, but also because it is super easy and fast to configure, and the community has a lot of updated documentation to fix most of the common issues related to server configuration.

At this point, you will need to invest some money to get this service. I will show you the cheapest way to do this, and if in the future you want to increase the power of your Droplets, you will be able to increase the capacity without redoing the configuration. The lowest price for the very basic Droplet is $5.00 per month ($0.007 per hour).

We are going to use Ubuntu 20.04 (but feel free to use the latest version 21.04); you will need to know some basic Linux commands to be able to configure your Droplet. If you're a beginner using Linux, don't worry—I'll try to show you each step in a very...