React 18 Design Patterns and Best Practices, 4e - Fourth Edition

Table of contents

1. Preface
   1. Who this book is for
   2. What this book covers
   3. Get in touch
2. 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
      1. Misconceptions about React
      2. Getting started with React without the fatigue
      3. Advantages of the JavaScript ecosystem
      4. Bye to Create-React-App, welcome to Vite!
         1. Vite as a solution
   6. Summary
3. Introducing TypeScript
   1. Technical requirements
   2. TypeScript’s features
   3. Converting JavaScript code into TypeScript
   4. Types
   5. Interfaces
   6. Extending interfaces and types
   7. Implementing interfaces and types
   8. Merging interfaces
   9. Enums
   10. Namespaces
   11. Template literals
   12. TypeScript configuration file
   13. Summary
4. Cleaning Up Your Code
   1. Technical requirements
   2. Using JSX
      1. Babel
      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. 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
   5. Summary
5. 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
6. 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
      1. Understanding forwardRef
   5. Implementing animations
   6. Exploring SVG
   7. Summary
7. Making Your Components Look Beautiful
   1. Technical requirements
   2. CSS in JavaScript
   3. Understanding and implementing inline styles
   4. Using CSS modules
      1. Webpack 5
   5. Setting up a project
   6. Locally scoped CSS
      1. Atomic CSS modules
   7. Implementing styled-components
   8. Summary
8. 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
9. 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
   4. Migrating a class component to React Hooks
   5. Understanding React effects
      1. Understanding useEffect
      2. Firing an effect conditionally
      3. 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 a function passed as an argument in effect
   6. Understanding the useReducer Hook
   7. Summary
10. React Router
    1. Technical requirements
    2. Installing and configuring React Router
    3. Creating our sections
    4. Adding parameters to the routes
    5. React Router v6.4
       1. React Router loaders
    6. Summary
11. React 18 New Features
    1. Concurrent mode
    2. Automatic batching
    3. Transitions
    4. Suspense on the server
    5. New APIs
       1. createRoot
       2. hydrateRoot
       3. renderToPipeableStream
    6. New Hooks
       1. useId
       2. useTransition
       3. useDeferredValue
       4. useInsertionEffect
    7. Strict mode
    8. Node.js latest features
       1. Experimental Fetch API
       2. Experimental test runner module
       3. Experimental node watch
       4. Node 18 is now Long-Term Support (LTS)
    9. Summary
12. 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
    4. Introducing React Suspense with SWR
       1. Introducing SWR
       2. Building a Pokedex!
          1. Testing React Suspense
    5. Redux Toolkit: a modern approach to Redux
       1. Key features
       2. Getting started
       3. Creating a store
       4. Creating a slice
       5. Combining reducers
       6. Connecting components to the store
       7. Integrating the store with a React application
    6. Summary
13. Server-Side Rendering
    1. Technical requirements
    2. Understanding universal applications
    3. Reasons for implementing SSR
       1. Implementing SEO
       2. A common code base
       3. Better performance
       4. Don’t underestimate the complexity of SSR
    4. Creating a basic example of SSR
       1. Configuring our project from scratch with webpack
       2. Creating the application
    5. Implementing data fetching
    6. Using Next.js to create a React application
    7. Summary
14. Understanding GraphQL with a Real Project
    1. Technical requirements
    2. Building a backend login system using PostgreSQL, Apollo Server, GraphQL, Sequelize, and JSON Web Tokens
    3. Installing PostgreSQL
       1. Best tools for PostgreSQL database management
    4. Creating our backend project
       1. Configuring our .env file
       2. Creating a basic config file
    5. Configuring Apollo Server
    6. Defining our GraphQL types, queries, and mutations
       1. Scalar types
       2. Queries
       3. Mutations
       4. Merging type definitions
    7. Creating our resolvers
       1. Creating the getUsers query
       2. Creating the getUser query
       3. Creating the mutations
       4. Merging our resolvers
    8. Using the Sequelize ORM
       1. Creating a user model in Sequelize
       2. Connecting Sequelize to a PostgreSQL database
    9. Authentication functions
       1. Creating JWT functions
       2. Creating authentication functions
       3. Defining types and interfaces
    10. Running our project for the first time
        1. Testing GraphQL queries and mutations
        2. Testing model validations and querying users
        3. Performing a login
    11. 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 user context to handle login and connected user
        9. Configuring 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
    12. Summary
15. MonoRepo Architecture
    1. Technical requirements
    2. Advantages of a monorepository and the problems it solves
    3. Creating a MonoRepo with NPM Workspaces
    4. Implementing TypeScript in our MonoRepo
    5. Creating a devtools package to compile packages with Webpack
       1. Creating a colorful log
       2. Webpack common configuration
       3. Webpack development configuration
       4. Webpack production configuration
    6. Creating the utils package
    7. Creating the API package
       1. Creating a user-shared model
       2. Creating a user-shared GraphQL type and resolver
       3. Creating custom services
       4. Building our service configuration
       5. Creating our custom models
       6. Creating model seeds
       7. Creating our custom GraphQL types and resolvers
       8. Synchronizing our models and starting Apollo Server
       9. Testing our CRM service
    8. Creating the frontend package
       1. Creating our Sites system
       2. Creating our Page Switcher
       3. Creating our Login system
       4. Creating our sites configuration
       5. Putting everything together
       6. Demo time!
    9. Summary
16. Improving the Performance of Your Applications
    1. Technical requirements
    2. How reconciliation works
    3. Using keys
    4. Optimization techniques
    5. Tools and libraries
       1. Immutability
       2. Babel plugins
    6. Summary
    7. Join our community on Discord
17. Testing and Debugging
    1. Technical requirements
    2. Understanding the benefits of testing
    3. Painless JavaScript testing with Jest
       1. Testing events
    4. Introducing Vitest
       1. Installing and configuring Vitest
       2. Enabling globals
       3. In-source testing
    5. Using React DevTools
       1. Using Redux DevTools
    6. Summary
18. 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 environment variables variables in CircleCI
    5. Summary
19. Other Books You May Enjoy
20. Index