React 17 Design Patterns and Best Practices E-Book

Carlos Santana Roldán

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch
• Veröffentlichungsjahr: 2021

Seitenzahl: 365

Beschreibung

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.

Leseprobe

React 17 Design Patterns and Best PracticesThird Edition

Design, build, and deploy production-ready web applications using industry-standard practices

Carlos Santana Roldán

BIRMINGHAM - MUMBAI

React 17 Design Patterns and Best PracticesThird Edition

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan RamchandaniPublishing Product Manager: Rohit RajkumarSenior Editor: Hayden EdwardsContent Development Editor:Abhishek JadhavTechnical Editor:Saurabh KadaveCopy Editor:Safis EditingProject Coordinator:Manthan PatelProofreader: Safis EditingIndexer:Tejal SoniProduction Designer: Roshan Kawale

First published: January 2017 Second edition: March 2019Third published: May 2021

Production reference: 1140521

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-80056-044-4

www.packt.com

To my lovely wife, Cristina, for her patience and support.

– Carlos Santana

About the author

Carlos Santana Roldán is a senior web developer with more than 13 years of experience. Currently, he is working as a senior software engineer at Snapchat. He is the founder of http://js.education, where he teaches people web technologies such as React, Node.js, JavaScript, and TypeScript.

About the reviewers

Phily Austria is a hands-on software engineering manager with a professional degree and 15 years of experience. He is currently a software engineering manager at Endpoint Closing, Inc. and still works hands-on in React.js. At this moment, he is interested in FinTech, PropTech, and blockchain.

Phily lives in Los Angeles with his wife, Ashley, and his very cute daughter, Chalida.

Before he became an engineering manager, Phily got a graduate degree in computer software engineering from Cal State Fullerton. He was a frontend engineer for 10 years, working with VanillaJS, jQuery, BackboneJS, EmberJS, AngularJS, and now React.js.

I would like to thank Packt and Carlos, the author, for the opportunity to review this book. Anyone who reads this book will become a React expert who can deploy their code to production. Not only are the fundamental React topics written about in detail here, but you will also find practical code and a step-by-step guide to ensure you understand everything about React with up-to-date information. Last but not least, thank you for picking up this book. I hope it makes you a React expert.

Kirill Ezhemenskii is an experienced software engineer, a frontend and mobile developer, a solution architect, and the CTO at a healthcare company. He's a functional programming advocate and an expert in the React stack, GraphQL, and TypeScript. He's also a React Native mentor.

Emmanuel Demey works with the JavaScript ecosystem on a daily basis. He spends his time sharing his knowledge with anyone and everyone. His first goal at work is to help the people he works with. He has spoken at French conferences (such as Devfest Nantes, Devfest Toulouse, Sunny Tech, and Devoxx France) about topics related to the web platform, such as JavaScript frameworks (Angular, React.js, and Vue.js), accessibility, and Nest.js. He has been a trainer for 10 years at Worldline and Zenika (two French consulting companies). He also the co-leader of the Google Developer of Lille group and the co-organizer of the Devfest Lille conference.

Table of Contents

Title Page

Copyrights and Credits

React 17 Design Patterns and Best Practices Third Edition

Dedication

Contributors

About the author

About the reviewers

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Hello 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

TypeScript features

Converting JavaScript code into TypeScript

Types

Interfaces

Extending

Implementing

Declaration merging

Summary

Cleaning Up Your Code

Technical requirements

Using JSX

Babel 7

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

Control statements

Sub-rendering

Styling code

EditorConfig

Prettier

ESLint

Installation

Configuration

Git Hooks

Functional programming

First-class functions

Purity

Immutability

Currying

Composition

FP and UIs

Summary

How React Works

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 function passed as an argument in effect

Understanding the useReducer Hook

Summary

Exploring Popular Composition Patterns

Technical requirements

Communicating components

Using the children prop

Exploring the container and presentational patterns

Understanding HOCs

Understanding FunctionAsChild

Summary

Understanding GraphQL with a Real Project

Technical requirements

Installing PostgreSQL

Best tools for PostgreSQL database management

Creating our .env file and configuration files

Configuring our .env file

Creating a basic config file

Configuring Apollo Server

Defining our GraphQL types, queries, and mutations

Queries

Mutations

Merging our type definitions

Creating our resolvers

Creating the getUsers query

Creating the getUserData query

Creating the mutations

Merging our resolvers

Creating Sequelize models

Connecting Sequelize to a PostgreSQL database

Authentication functions

What is JSON Web Token?

JWT functions

Creating authentication functions

Types and interfaces

Running our project for the first time

Testing our GraphQL queries and mutations

Validations

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 our user context to handle the login and the connected user

Configuring our Apollo Client

Creating our app routes

Creating our pages

Creating our Login components

Creating our Dashboard components

Testing our login system

Summary

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 our React Suspense

Summary

Writing Code for the Browser

Technical requirements

Understanding and implementing forms

Uncontrolled components

Controlled components

Handling events

Exploring refs

Implementing animations

React Motion

Exploring SVG

Summary

Performance, Improvements, and Production!

Making Your Components Look Beautiful

Technical requirements

CSS in JavaScript

Understanding and implementing inline styles

Exploring the Radium library

Using CSS modules

Webpack 5

Setting up a project

Locally scoped CSS

Atomic CSS modules

React CSS modules

Implementing styled-components

Summary

Server-Side Rendering for Fun and Profit

Technical requirements

Understanding universal applications

Reasons for implementing SSR

Implementing search engine optimization

A common code base

Better performance

Don't underestimate the complexity

Creating a basic example of SSR

Implementing data fetching

Using Next.js to create a React application

Summary

Improving the Performance of Your Applications

Technical requirements

Reconciliation

Keys

Optimization techniques

Tools and libraries

Immutability

Babel plugins

Summary

Testing and Debugging

Technical requirements

Understanding the benefits of testing

Painless JavaScript testing with Jest

Testing events

Using React DevTools

Using Redux DevTools

Summary

React Router

Technical requirements

Installing and configuring React Router

Creating our sections

Adding parameters to the routes

Summary

Anti-Patterns to Be Avoided

Technical requirements

Initializing the state using properties

Using indexes as a key

Spreading properties on DOM elements

Summary

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 ENV variables in CircleCI

Summary

Next Steps

Technical requirements

Contributing to React

Distributing your code

Knowing the best practices when pushing open source code

Publishing an npm package

Summary

About Packt

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Leave a review - let other readers know what you think

Hello React!

The objective of this section is to explain to you the basic concepts of declarative programming, React elements, and how to use TypeScript.

We will cover the following chapters in this section:

Chapter 1, Taking Your First Steps with React

Chapter 2, Cleaning Up Your Code