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 their 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 fatigue 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, Clean Up Your Code, teaches the reader 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. In the second part, 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, Create Truly Reusable Components, starts from a deep study of the basics, outlining the differences between stateful and stateless components, and providing an example of how to make a tightly-coupled component reusable. We'll look at the internal state of a component and at when it is better to avoid using it. We will also learn the basics of prop types, and will apply those concepts to the reusable components we created. Finally, we'll look at how living style guides can help us to communicate better with other members of our team, so as to avoid creating duplicated components and to enforce consistency within the application.
Chapter 4, Compose All the Things, 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 the 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, Proper Data Fetching, goes through some of the most common patterns to make a child and parent communicate using callbacks. We'll then learn how we could use a common parent to share data across components that are not directly connected. We then start with a simple component, which will be able to load data from GitHub, and we make it reusable with HoC, and then go on to learn how we could use react-refetch to apply data fetching patterns to our components and avoid reinventing the wheel. Finally, we learn how to use the new Context API.
Chapter 6, Write 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 7, Make 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 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 8, 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 9, Improve 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 10, About 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 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 11, 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 be able to add dynamic routes and understand how exactly React Router works. We will learn how to install and configure React Router, along with adding a <Switch> component, exact prop, and parameters to routes.
Chapter 12, 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 for 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 can we avoid doing that.
Chapter 13, Deploying to Production, covers how to deploy our React application using Node.js and nginx on an Ubuntu server from Digital Ocean, along with configuring nginx, PM2, and a domain. Implementing CircleCI for continuous integration will also be covered.
Chapter 14, 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.