Fluent React

When it comes to building user interfaces on the web, React enables web developers to unlock a new world of possibilities. This practical book helps you take a deep dive into fundamental concepts of this JavaScript library, including JSX syntax and advanced patterns, the virtual DOM, React reconciliation, and advanced optimization techniques. By becoming fluent in React, you’ll quickly learn how to build better web applications.

Author Tejas Kumar helps you explore the depths of React in plain English, without the typical software engineering jargon, so you can more easily understand how this JavaScript library works. You’ll learn how to write intuitive React code that fully understands the nuances and layers of React, unlocking a whole new level of fluency.

You will:

• Understand how React works at a deeper level
• Write React apps while optimizing them along the way
• Build resilient React applications that work well at arbitrary scale
• Create React applications for other platforms adjacent to the web and mobile devices
• Know when to reach for different mechanisms exposed by React, such as reducers versus state versus refs

Table of Contents

Chapter 1. The Entry-Level Stuff

Chapter 2. JSX

Chapter 3. The Virtual DOM

Chapter 4. Inside Reconciliation

Chapter 5. Common Questions and Powerful Patterns

Chapter 6. Server-Side React

Chapter 7. Concurrent React

Chapter 8. Frameworks

Chapter 9. React Server Components

Chapter 10. React Alternatives

Chapter 11. Conclusion

This book is not for people who want to learn how to use React. If you’re unfamiliar with React and looking for a tutorial, a great place to start is the React documentation over at react.dev. Instead, this book is for the curious: people who aren’t as interested in how to use React, but who are more interested in how React works.

In our time together, we will go on a journey through a number of React concepts and understand their underlying mechanism, exploring how it all fits together to enable us to create applications using React more effectively. In our pursuit of understanding the underlying mechanism, we will develop the mental models necessary to reason about React and its ecosystem with a high degree of fidelity.

This book assumes we have a satisfactory understanding of this statement: browsers render web pages. Web pages are HTML documents that are styled by CSS and made interactive with JavaScript. It also assumes we’re somewhat familiar with how to use React, and that we’ve built a React app or two in our time. Ideally, some of our React apps are in production.

We’ll start with an introduction to React and recap its history, casting our minds back to 2013 when it was first released as open source software. From there, we’ll explore the core concepts of React, including the component model, the virtual DOM, and reconciliation. We’ll dive into the compiler theory of how JSX works, talk about fibers, and understand its concurrent programming model in depth. This way we’ll glean powerful takeaways that will help us more fluently memoize what ought to be memoized and defer rendering work that ought to be deferred through powerful primitives like React.memo and useTransition.

In the second half of this book, we’ll explore React frameworks: what problems they solve, and the mechanisms by which they solve them. We’ll do so by writing our own framework that solves three salient problems across nearly all web applications: server rendering, routing, and data fetching.

Once we solve these problems for ourselves, understanding how frameworks solve them becomes far more approachable. We’ll also dive deep into React Server Components (RSCs) and server actions, understanding the role of next-generation tooling, like bundlers and isomorphic routers.

Finally, we’ll zoom out from React and look at alternatives like Vue, Solid, Angular, Qwik, and more. We’ll explore signals and fine-grained reactivity in contrast to React’s coarser reactivity model. We’ll also explore React’s response to signals: the Forget toolchain and how it stacks up when compared to signals.

There’s so much to get into, so let’s not waste any more time. Let’s get started!

About the Author

Tejas Kumar has been writing React code since 2014 and has given multiple conference talks, workshops, and guest lectures on the topic. With his wealth of experience across the technical stack of multiple startups, Tejas has developed a deep understanding of React’s core concepts and enjoys using it to encourage, equip, and empower others to write React apps fluently.