React 17 Design Patterns and Best Practices, 3rd Edition
- Length: 371 pages
- Edition: 1
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2021-06-09
- ISBN-10: 1800560443
- ISBN-13: 9781800560444
- Sales Rank: #325964 (See Top 100 Books)
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
- Become well-versed with new React features such as context API and React Hooks
- Get to grips with the techniques of styling and optimizing React components
- Make components communicate with each other by applying consolidated patterns
- 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.
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
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: React 17 Design Patterns and Best Practices, 3rd Edition
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.