Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
React 17 Design Patterns and Best Practices

You're reading from   React 17 Design Patterns and Best Practices Design, build, and deploy production-ready web applications using industry-standard practices

Arrow left icon
Product type Paperback
Published in May 2021
Publisher Packt
ISBN-13 9781800560444
Length 394 pages
Edition 3rd Edition
Languages
Tools
Arrow right icon
Toc

Table of Contents (21) Chapters Close

Preface 1. Hello React!
2. Taking Your First Steps with React FREE CHAPTER 3. Cleaning Up Your Code 4. How React Works
5. React Hooks 6. Exploring Popular Composition Patterns 7. Understanding GraphQL with a Real Project 8. Managing Data 9. Writing Code for the Browser 10. Performance, Improvements, and Production!
11. Making Your Components Look Beautiful 12. Server-Side Rendering for Fun and Profit 13. Improving the Performance of Your Applications 14. Testing and Debugging 15. React Router 16. Anti-Patterns to Be Avoided 17. Deploying to Production 18. Next Steps 19. About Packt 20. Other Books You May Enjoy

What this book covers

Chapter 1, Taking Your First Steps with React, covers some basic concepts that are important for following the rest of the book, and that are crucial to working with React daily. We will learn how to write declarative code and will gain a clear understanding of the difference between the components we create and the elements React uses to display instances on the screen. We'll then learn the reasons behind the choice of co-locating logic and templates together, and why that unpopular decision has been a big win for React. We will go through the reasons why it is common to feel fatigued in the JavaScript ecosystem, but we'll also see how to avoid those problems by following an iterative approach. Finally, we will see what the new create-react-app CLI is, and with that, we'll be ready to start writing some real code.

Chapter 2, Cleaning Up Your Code, teaches you a great deal about how JSX works and how to use it in the right way in our components. We start from the basics of the syntax to create a solid knowledge base that will enable us to master JSX and its features. We will look at how ESLint and its plugins can help us find problems faster and enforce a consistent style guide across our code base. Finally, we will go through the basics of functional programming to understand the important concepts to use when writing a React application. Now that our code is clean, we are ready to start digging deeper into React and learn how to write truly reusable components.

Chapter 3, React Hooks, teaches you how to use the new React Hooks and how to build your own Hooks.

Chapter 4, Exploring Popular Composition Patterns, explains how to compose our reusable components and make them communicate effectively. Then, we will go through some of the most interesting composition patterns in React. We will also see how React tried to solve the problem of sharing functionalities between components with mixins. We'll then learn how to deal with context without needing to couple our components to it, thanks to HOCs. Finally, we'll see how we can compose components dynamically by following the FunctionAsChild pattern.

Chapter 5, Understanding GraphQL with a Real Project, explains how to use GraphQL queries and mutations with a real project, where you will learn how to build an authentication system with GraphQL, JWT tokens, and Node.js.

Chapter 6, Managing Data, goes through some of the most common patterns to make a child and parent communicate using callbacks. We'll then learn how we can use a common parent to share data across components that are not directly connected. We will start with a simple component, which will be able to load data from GitHub, and we'll make it reusable with HOCs, and then go on to learn how we can use react-refetch to apply data fetching patterns to our components and avoid reinventing the wheel. Finally, we'll learn how to use the new Context API.

Chapter 7, Writing Code for the Browser, looks at different things we can do when we target the browser with React, from form creation to events; from animations to SVGs. React gives us a declarative way to manage all the aspects we need to deal with when we create a web application. React gives us access to the actual DOM nodes in a way that we can perform imperative operations with them, which is useful if we need to integrate React with an existing imperative library.

Chapter 8, Making Your Components Look Beautiful, studies the reasons why regular CSS may not be the best approach for styling components, along with the various alternative solutions. Moving through the chapter, we'll learn to use inline styles in React, along with the downsides of this, which can be fixed by using the Radium library. At the end, a new library, styled-components, will be introduced, along with an outline of the modern approach that it offers.

Chapter 9, Server-Side Rendering for Fun and Profit, invites you to follow certain steps to set up a server-side rendered application. By the end of this chapter, we will be able to build a universal application and be aware of its pros and cons.

Chapter 10, Improving the Performance of Your Applications, takes a quick look at the basic components of the performance of React, and how we can use some APIs to help the library find the optimal path to update the DOM without degrading the user experience. We will also learn how to monitor performance and find bottlenecks using some tools that we can import into our code base. At the end, we'll see how immutability and PureComponent are the perfect tools to build fast React applications.

Chapter 11, Testing and Debugging, explains why it is important to test our applications, along with an outline of the most popular tools that we could use to create tests with React. We will also learn to set up a Jest environment to test components using Enzyme, along with a discussion of what Enzyme is and why it is a must for testing React applications. By covering all these topics, at the end of the chapter, we will be able to create a test environment from scratch and write tests for our application's components.

Chapter 12, React Router, looks at certain steps that will help us to implement React Router in our application. Moving ahead, as we complete each section, we will add dynamic routes and understand how exactly React Router works. We will learn how to install and configure React Router, along with adding a component, exact prop, and parameters to routes.

Chapter 13, Anti-Patterns to be Avoided, is all about the common anti-patterns we should avoid when using React. We will study why mutating the state is harmful to performance. Choosing the right keys and helping the reconciler will also be covered in this chapter, along with the reason why spreading props on DOM elements is bad and how we can avoid doing that.

Chapter 14, Deploying to Production, covers how to deploy our React application using Node.js and nginx on an Ubuntu server from Google Cloud, along with configuring nginx, PM2, and a domain. Implementing CircleCI for continuous integration will also be covered.

Chapter 15, Next Steps, demonstrates how we can contribute to the React library by opening issues and pull requests, and explains why it is important to give back to the community and share our code. At the end, we will cover the most important aspects to keep in mind when pushing open source code, along with how we can publish an npm package and how to use semantic versioning.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image