Build modular React web apps that are scalable, maintainable, and powerful using design patterns and insightful best practices
▶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
▶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
▶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.
▶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.
