Build modular React web apps that are scalable, maintainable, and powerful using design patterns and insightful best practices

Key Features

  • Get up to speed with design patterns in React such as render props and controlled and uncontrolled inputs
  • Become well-versed with React Hooks in this updated third edition
  • Work through examples that can be used to create reusable code and extensible designs

Book Description

React is an open-source, adaptable JavaScript library for building complex user interfaces (UIs) from small, detached bits called components. This book will help you to use React effectively to make your applications more flexible, easier to maintain, and improve their performance, while giving your workflow a huge boost by improving speed without affecting quality.

You'll start by understanding the internals of React, before gradually moving on to writing maintainable and clean code. The chapters that follow will show you how to build components that are reusable across the application, structure applications, and create forms that actually work. Later, you will build on your knowledge by exploring how to style React components and optimize them to make applications faster and more responsive. Finally, you'll write tests effectively and learn 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, and instead, have the skills you need to efficiently build and deploy real-world React web applications.

What you will learn

  • Get to grips with the techniques of styling and optimizing React components
  • Create components using the new React Hooks
  • Get to grips with the new React Suspense technique and using GraphQL in your projects
  • Use server-side rendering to make applications load faster
  • 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 increase their understanding of React and apply it to real-life app development. Intermediate-level experience with React and JavaScript is assumed.

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
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. 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
    7. TypeScript features
    8. Converting JavaScript code into TypeScript
    9. Types
    10. Interfaces
    11. Extending
    12. Implementing
    13. Declaration merging
    14. Summary
  8. Cleaning Up Your Code
    1. Technical requirements
    2. Using JSX
    3. Babel 7
    4. Creating our first element
    5. DOM elements and React components
    6. Props
    7. Children
    8. Differences with HTML
    9. Attributes
    10. Style
    11. Root
    12. Spaces
    13. Boolean attributes
    14. Spread attributes
    15. Template literals
    16. Common patterns
    17. Multiline
    18. Multi-properties
    19. Conditionals
    20. Loops
    21. Control statements
    22. Sub-rendering
    23. Styling code
    24. EditorConfig
    25. Prettier
    26. ESLint
    27. Installation
    28. Configuration
    29. Git Hooks
    30. Functional programming
    31. First-class functions
    32. Purity
    33. Immutability
    34. Currying
    35. Composition
    36. FP and UIs
    37. Summary
  9. How React Works
  10. React Hooks
    1. Technical requirements
    2. Introducing React Hooks
    3. No breaking changes
    4. Using the State Hook
    5. Rules of Hooks
    6. Rule 1: Only call Hooks at the top level
    7. Rule 2: Only call Hooks from React Functions
    8. Migrating a class component to React Hooks
    9. Understanding React effects
    10. Understanding useEffect
    11. Firing an effect conditionally
    12. Understanding useCallback, useMemo, and memo
    13. Memoizing a component with memo
    14. Memoizing a value with useMemo 
    15. Memoizing a function definition with useCallback
    16. Memoizing function passed as an argument in effect
    17. Understanding the useReducer Hook
    18. Summary
  11. Exploring Popular Composition Patterns
    1. Technical requirements
    2. Communicating components
    3. Using the children prop
    4. Exploring the container and presentational patterns
    5. Understanding HOCs
    6. Understanding FunctionAsChild
    7. Summary
  12. Understanding GraphQL with a Real Project
    1. Technical requirements
    2. Installing PostgreSQL
    3. Best tools for PostgreSQL database management
    4. Creating our .env file and configuration files
    5. Configuring our .env file
    6. Creating a basic config file
    7. Configuring Apollo Server
    8. Defining our GraphQL types, queries, and mutations
    9. Queries
    10. Mutations
    11. Merging our type definitions
    12. Creating our resolvers
    13. Creating the getUsers query
    14. Creating the getUserData query
    15. Creating the mutations
    16. Merging our resolvers
    17. Creating Sequelize models
    18. Connecting Sequelize to a PostgreSQL database
    19. Authentication functions
    20. What is JSON Web Token?
    21. JWT functions
    22. Creating authentication functions
    23. Types and interfaces
    24. Running our project for the first time
    25. Testing our GraphQL queries and mutations
    26. Validations
    27. Performing a login
    28. Building a frontend login system with Apollo Client
    29. Configuring Webpack 5
    30. Configuring our TypeScript
    31. Configuring the Express server
    32. Creating our frontend configuration
    33. Creating the user middleware
    34. Creating JWT functions
    35. Creating our GraphQL queries and mutations
    36. Creating our user context to handle the login and the connected user
    37. Configuring our Apollo Client
    38. Creating our app routes
    39. Creating our pages
    40. Creating our Login components
    41. Creating our Dashboard components
    42. Testing our login system
    43. Summary
  13. Managing Data
    1. Technical requirements
    2. Introducing the React Context API
    3. Creating our first context
    4. Wrapping our components with the provider
    5. Consuming context with useContext
    6. Introducing React Suspense with SWR
    7. Introducing SWR
    8. Building a Pokedex!
    9. Testing our React Suspense
    10. Summary
  14. Writing Code for the Browser
    1. Technical requirements
    2. Understanding and implementing forms
    3. Uncontrolled components
    4. Controlled components
    5. Handling events
    6. Exploring refs
    7. Implementing animations
    8. React Motion
    9. Exploring SVG
    10. 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
    6. Webpack 5
    7. Setting up a project
    8. Locally scoped CSS
    9. Atomic CSS modules
    10. React CSS modules
    11. Implementing styled-components
    12. Summary
  17. Server-Side Rendering for Fun and Profit
    1. Technical requirements
    2. Understanding universal applications
    3. Reasons for implementing SSR
    4. Implementing search engine optimization
    5. A common code base
    6. Better performance
    7. Don't underestimate the complexity
    8. Creating a basic example of SSR
    9. Implementing data fetching
    10. Using Next.js to create a React application
    11. Summary
  18. Improving the Performance of Your Applications
    1. Technical requirements
    2. Reconciliation
    3. Keys
    4. Optimization techniques
    5. Tools and libraries
    6. Immutability
    7. Babel plugins
    8. 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
    3. Signing up to DigitalOcean
    4. Creating our first Droplet
    5. Installing Node.js
    6. Configuring Git and GitHub
    7. Turning off our Droplet
    8. Configuring nginx, PM2, and a domain
    9. Installing and configuring nginx
    10. Setting up a reverse proxy server
    11. Adding a domain to our Droplet
    12. Implementing CircleCI for continuous integration
    13. Adding an SSH key to CircleCI
    14. Configuring CircleCI
    15. Creating ENV variables in CircleCI
    16. Summary
  23. Next Steps
    1. Technical requirements
    2. Contributing to React
    3. Distributing your code
    4. Knowing the best practices when pushing open source code
    5. Publishing an npm package
    6. 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