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