React 17 Design Patterns and Best Practices - Third Edition

React 17 Design Patterns and Best Practices - Third Edition

by Carlos Santana Roldán
Released May 2021
Publisher(s): Packt Publishing
ISBN: 9781800560444

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Title Page
  2. Copyrights and Credits
    1. React 17 Design Patterns and Best Practices Third Edition
  3. Dedication
  4. Contributors
    1. About the author
    2. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Hello React!
  7. Taking Your First Steps with React
    1. Technical requirements
    2. Differentiating between declarative and imperative programming
    3. How React elements work
    4. Unlearning everything
    5. Understanding JavaScript fatigue
    6. Introducing TypeScript
      1. TypeScript features
      2. Converting JavaScript code into TypeScript
      3. Types
      4. Interfaces
        1. Extending
        2. Implementing
        3. Declaration merging
    7. Summary
  8. Cleaning Up Your Code
    1. Technical requirements
    2. Using JSX
      1. Babel 7
      2. Creating our first element
      3. DOM elements and React components
      4. Props
      5. Children
      6. Differences with HTML
        1. Attributes
        2. Style
        3. Root
        4. Spaces
        5. Boolean attributes
      7. Spread attributes
      8. Template literals
      9. Common patterns
        1. Multiline
        2. Multi-properties
        3. Conditionals
        4. Loops
        5. Control statements
        6. Sub-rendering
    3. Styling code
      1. EditorConfig
      2. Prettier
      3. ESLint
        1. Installation
        2. Configuration
        3. Git Hooks
    4. Functional programming
      1. First-class functions
      2. Purity
      3. Immutability
      4. Currying
      5. Composition
      6. FP and UIs
    5. Summary
  9. How React Works
  10. React Hooks
    1. Technical requirements
    2. Introducing React Hooks
      1. No breaking changes
      2. Using the State Hook
      3. Rules of Hooks
        1. Rule 1: Only call Hooks at the top level
        2. Rule 2: Only call Hooks from React Functions
    3. Migrating a class component to React Hooks
    4. Understanding React effects
      1. Understanding useEffect
      2. Firing an effect conditionally
    5. Understanding useCallback, useMemo, and memo
      1. Memoizing a component with memo
      2. Memoizing a value with useMemo 
      3. Memoizing a function definition with useCallback
      4. Memoizing function passed as an argument in effect
    6. Understanding the useReducer Hook
    7. Summary
  11. Exploring Popular Composition Patterns
    1. Technical requirements
    2. Communicating components
      1. Using the children prop
    3. Exploring the container and presentational patterns
    4. Understanding HOCs
    5. Understanding FunctionAsChild
    6. Summary
  12. Understanding GraphQL with a Real Project
    1. Technical requirements
    2. Installing PostgreSQL
      1. Best tools for PostgreSQL database management
    3. Creating our .env file and configuration files
      1. Configuring our .env file
      2. Creating a basic config file
    4. Configuring Apollo Server
    5. Defining our GraphQL types, queries, and mutations
      1. Queries
      2. Mutations
    6. Merging our type definitions
    7. Creating our resolvers
      1. Creating the getUsers query
      2. Creating the getUserData query
      3. Creating the mutations
    8. Merging our resolvers
    9. Creating Sequelize models
    10. Connecting Sequelize to a PostgreSQL database
    11. Authentication functions
      1. What is JSON Web Token?
      2. JWT functions
      3. Creating authentication functions
      4. Types and interfaces
    12. Running our project for the first time
    13. Testing our GraphQL queries and mutations
      1. Validations
    14. Performing a login
    15. Building a frontend login system with Apollo Client
      1. Configuring Webpack 5
      2. Configuring our TypeScript
      3. Configuring the Express server
      4. Creating our frontend configuration
      5. Creating the user middleware
      6. Creating JWT functions
      7. Creating our GraphQL queries and mutations
      8. Creating our user context to handle the login and the connected user
      9. Configuring our Apollo Client
      10. Creating our app routes
      11. Creating our pages
      12. Creating our Login components
      13. Creating our Dashboard components
      14. Testing our login system
    16. Summary
  13. Managing Data
    1. Technical requirements
    2. Introducing the React Context API
      1. Creating our first context
      2. Wrapping our components with the provider
      3. Consuming context with useContext
    3. Introducing React Suspense with SWR
      1. Introducing SWR
      2. Building a Pokedex!
      3. Testing our React Suspense
    4. Summary
  14. Writing Code for the Browser
    1. Technical requirements
    2. Understanding and implementing forms
      1. Uncontrolled components
      2. Controlled components
    3. Handling events
    4. Exploring refs
    5. Implementing animations
      1. React Motion
    6. Exploring SVG
    7. Summary
  15. Performance, Improvements, and Production!
  16. Making Your Components Look Beautiful
    1. Technical requirements
    2. CSS in JavaScript
    3. Understanding and implementing inline styles
    4. Exploring the Radium library
    5. Using CSS modules
      1. Webpack 5
      2. Setting up a project
      3. Locally scoped CSS
      4. Atomic CSS modules
      5. React CSS modules
    6. Implementing styled-components
    7. Summary
  17. Server-Side Rendering for Fun and Profit
    1. Technical requirements
    2. Understanding universal applications
    3. Reasons for implementing SSR
      1. Implementing search engine optimization
      2. A common code base
      3. Better performance
      4. Don't underestimate the complexity
    4. Creating a basic example of SSR
    5. Implementing data fetching
    6. Using Next.js to create a React application
    7. Summary
  18. Improving the Performance of Your Applications
    1. Technical requirements
    2. Reconciliation
    3. Keys
    4. Optimization techniques
    5. Tools and libraries
      1. Immutability
      2. Babel plugins
    6. Summary
  19. Testing and Debugging
    1. Technical requirements
    2. Understanding the benefits of testing
    3. Painless JavaScript testing with Jest
    4. Testing events
    5. Using React DevTools
    6. Using Redux DevTools
    7. Summary
  20. React Router
    1. Technical requirements
    2. Installing and configuring React Router
    3. Creating our sections
    4. Adding parameters to the routes
    5. Summary
  21. Anti-Patterns to Be Avoided
    1. Technical requirements
    2. Initializing the state using properties
    3. Using indexes as a key
    4. Spreading properties on DOM elements
    5. Summary
  22. Deploying to Production
    1. Technical requirements
    2. Creating our first DigitalOcean Droplet
      1. Signing up to DigitalOcean
      2. Creating our first Droplet
      3. Installing Node.js
      4. Configuring Git and GitHub
      5. Turning off our Droplet
    3. Configuring nginx, PM2, and a domain
      1. Installing and configuring nginx
      2. Setting up a reverse proxy server
      3. Adding a domain to our Droplet
    4. Implementing CircleCI for continuous integration
      1. Adding an SSH key to CircleCI
      2. Configuring CircleCI
      3. Creating ENV variables in CircleCI
    5. Summary
  23. Next Steps
    1. Technical requirements
    2. Contributing to React
    3. Distributing your code
      1. Knowing the best practices when pushing open source code
    4. Publishing an npm package
    5. Summary
  24. About Packt
    1. Why subscribe?
  25. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think

Product information

  • Title: React 17 Design Patterns and Best Practices - Third Edition
  • Author(s): Carlos Santana Roldán
  • Release date: May 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800560444