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.

Related Content you might be interested in

Current Title:

Small book image
React 17 Design Patterns and Best Practices - Third Edition
Carlos Santana Roldán
May, 2021 | 394 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Small book image
Isomorphic JavaScript Web Development
Tomas Alabes | Konstantin Tarkus
Oct, 2017 | 226 pages
Small book image
React Interview Guide
Sudheer Jonna | Andrew Baisden
Nov, 2023 | 346 pages
Table of Contents (21 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1
Hello React!
Hello React!
Free Chapter
2
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
Summary
3
Cleaning Up Your Code
Cleaning Up Your Code
Technical requirements
Using JSX
Styling code
Functional programming
Summary
4
How React Works
How React Works
5
React Hooks
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
Summary
6
Exploring Popular Composition Patterns
Exploring Popular Composition Patterns
Technical requirements
Communicating components
Exploring the container and presentational patterns
Understanding HOCs
Understanding FunctionAsChild
Summary
7
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
Summary
8
Managing Data
Managing Data
Technical requirements
Introducing the React Context API
Introducing React Suspense with SWR
Summary
9
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
10
Performance, Improvements, and Production!
Performance, Improvements, and Production!
11
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
Summary
12
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
Summary
13
Improving the Performance of Your Applications
Improving the Performance of Your Applications
Technical requirements
Reconciliation
Keys
Optimization techniques
Tools and libraries
Summary
14
Testing and Debugging
Testing and Debugging
Technical requirements
Understanding the benefits of testing
Painless JavaScript testing with Jest
Testing events
Using React DevTools
Using Redux DevTools
Summary
15
React Router
React Router
Technical requirements
Installing and configuring React Router
Creating our sections
Adding parameters to the routes
Summary
16
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
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
Next Steps
Next Steps
Technical requirements
Contributing to React
Distributing your code
Publishing an npm package
Summary
19
About Packt
About Packt
Why subscribe?
20
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

Implementing styled-components

There is a library that is very promising because it takes into account all the problems other libraries have encountered in styling components. Different paths have been followed for writing CSS in JavaScript, and many solutions have been tried, so now the time is ripe for a library that takes all the learning and then builds something on top of it.

The library is conceived and maintained by two popular developers in the JavaScript community: Glenn Maddern and Max Stoiberg. It represents a very modern approach to the problem, and it uses edge features of ES2015 and some advanced techniques that have been applied to React to provide a complete solution for styling.

Let's look at how it is possible to create the same button we saw in the previous sections, and check whether all the CSS features we are interested in (for example, pseudo-classes and media queries) work with styled-components.

First, we have to install the library by running the following...

Previous Section
End of Section 7
Next Section