React 17 Design Patterns and Best Practices

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

Carlos Santana Roldán

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781800561762
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Build scalable, maintainable, and powerful React web apps with design patterns and insightful best practices

Key Features

• Make the most of design patterns in React – including render props and controlled and uncontrolled inputs
• Master React Hooks with the help of this updated third edition
• Work through examples that can be used to create reusable code and extensible designs

Book Description

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.

What you will learn

• Get to grips with the techniques of styling and optimizing React components
• Create components using the new React Hooks
• Use server-side rendering to make applications load faster
• Get up to speed with the new React Suspense technique and using GraphQL in your projects
• Write a comprehensive set of tests to create robust and maintainable code
• Build high-performing applications by optimizing components

Who this book is for

This book is for web developers who want to understand React better and apply it to real-life app development. You'll need an intermediate-level experience with React and JavaScript before you get started.

]]>

Understanding GraphQL with a Real Project

GraphQL is a query language for APIs that helps them work with your existing data. It provides a complete description of the data in your API, and you can only request the exact data you need and nothing more. It also makes it easier to improve APIs if they need it and has very powerful developer tools.

In this chapter, we are going to learn how to use GraphQL in a real project by creating a basic login and user registration system.

We will cover the following topics in this chapter:

• Installing PostgreSQL
• Creating environment variables with a .env file
• Configuring Apollo Server
• Defining GraphQL queries and mutations
• Working with resolvers
• Creating Sequelize models
• Implementing JWTs
• Using GraphQL Playground
• Performing authentication

Technical requirements

To complete this chapter, you will need the following:

• Node.js 12+
• Visual Studio Code
• PostgreSQL
• Homebrew (https://brew.sh)
• pgAdmin 4 (https://www.pgadmin.org/download/)
• OmniDB (https://omnidb.org)

You can find the code for this chapter in this book's GitHub repository: https://github.com/PacktPublishing/React-17-Design-Patterns-and-Best-Practices-Third-Edition/tree/main/Chapter05.

Installing PostgreSQL

For this example, we will use a PostgreSQL database, so you'll need to install PostgreSQL to be able to run this project on your machine.

If you have a macOS machine, the easiest way to install PostgreSQL is by doing so with Homebrew. You just need to run the following command:

brew install postgres

Once you've installed it, you need to run the following command:

ln -sfv /usr/local/opt/postgresql/*.plist ~/Library/LaunchAgents

Then, you can create two new aliases to start and stop your PostgreSQL server:

alias pg_start="launchctl load ~/Library/LaunchAgents"
alias pg_stop="launchctl unload ~/Library/LaunchAgents"

Now, you should be able to start your PostgreSQL server by using pg_start or stop it with pg_stop.

After this, you need to create your first database, like so:

createdb `whoami`

Now, you can connect to PostgreSQL using the psql command.

If you get an error stating role "postgresql" does not exist, you can fix it by running the following command:

createuser -s postgres

If you did everything correctly, you should see something like this:

If you use Windows, you can download PostgreSQL at https://www.postgresql.org/download/windows/ and for those that use Linux (Ubuntu), you can download it from https://www.postgresql.org/download/linux/ubuntu/.

Best tools for PostgreSQL database management

One of the bests tools for PostgreSQL database management is pgAdmin 4 (https://www.pgadmin.org/download/). I like this tool as it can be used to create new servers, users, and databases. The other tool I like to use to perform SQL queries and work with data is OmniDB (https://omnidb.org). I highly recommend that you install both tools.

Remember to create a database in order to use it in this example.

Sometimes, you may get an error when you start your PostgreSQL server that could say something like
FATAL: lock file "postmaster.pid" already exists.

If you get this error, you can easily fix it by running the rm /usr/local/var/postgres/postmaster.pid command. Then, you will be able to start your PostgreSQL server.

Creating our .env file and configuration files

First, you need to create a backend directory in your GraphQL project (graphql/backend), after that let's review the huge list of NPM packages you will need to install (the most relevant):

npm init --yes

npm install @contentpi/lib @graphql-tools/load-files @graphql-tools/merge apollo-server dotenv express jso...