The Road to React

This version was published on 2024-02-05

The Road to React: The React.js with Hooks in JavaScript Book (2024 Edition) – is a comprehensive and pragmatic yet concise React 18 with Hooks (+ opt-in TypeScript) book. Purchase of this book includes free online access to the always up-to-date digital book.

What you will learn.

“The Road to React” made its debut in 2016, and since then, I’ve almost rewritten it annually. This book teaches the core principles of React, guiding you through building a practical application in pure React without complex tooling. The book covers everything from setting up the project to deploying it on a server. Each chapter includes additional recommended reading and exercises. By the end, you’ll have the skills to develop your own React applications.

In “The Road to React,” I establish a solid foundation before delving into the broader React ecosystem. The book clarifies general concepts, patterns, and best practices for real-world React applications. Ultimately, you’ll learn to construct a React application from scratch, incorporating features such as pagination, client-side and server-side searching, and advanced UI interactions like sorting.

Is it up to date?

Programming books are usually outdated soon after their release, but since this book is self- published, I can update it as needed whenever a new version of something related to this book gets released.

I am a beginner. Is this book for me?

Yes. The book starts from zero and takes you through the learning experience step by step. Every chapter builds up on the learnings from the previous chapter. In addition, at the end of every chapter, exercises fortify your lessons learned. If you got stuck in a chapter, you will always find a reference URL to the status quo of the actual code.

Core Concepts

• Pragmatic: Master React while building a complete application step by step.
• Problems Solving: You need to experience a problem first before solving it.
• The Why: Readers like how the book answers the Why, not only the How.

Table of Contents

Fundamentals of React

• Hello React
• Requirements
• Setting up a React Project
• Meet the React Component
• React JSS
• Lists in React
• Meet another React Component
• React Component Instantiation
• ReactDOM
• React Component Definition (Advanced)
• Handler Function in JSX
• React Props
• React State
• Callback Handlers in JSX
• Lifting State in React
• React Controlled Components
• Props Handling (Advanced)
• React Side-Effects
• React Custom Hooks (Advanced)
• React Fragments
• Reusable React Component
• React Component Composition
• Imperative React
• Inline Handler in JSX
• React Asynchronous Data
• React Conditional Rendering
• React Advanced State
• React Impossible States
• Data Fetching with React
• Data Re-Fetching in React
• Memoized Handler in React (Advanced)
• Explicit Data Fetching with React
• Third-Party Libraries in React
• Async/Await in React (Advanced)
• Forms in React

Styling in React

• CSS in React
• CSS Modules in React
• Styled Components in React
• SVGs in React

React Maintenance

• Performance in React (Advanced)
• TypeScript in React
• Unit Testing to Integration Testing
• React Project Structure

Real World React (Advanced)

• Sorting
• Reverse Sort
• Remember Last Searches
• Paginated Fetch

Deploying a React Application

• Build Process
• Deploy to Firebase

About the Author

Robin Wieruch is a German software and web engineer who is dedicated to learn and teach programming in JavaScript. After obtaining his master’s degree in computer science, he continued learning every day on his own. He gained experience from the startup world where he used JavaScript excessively during his professional time and spare time. It gave him the opportunity to teach others about these topics.

For a few years, Robin worked closely with a great team of engineers at a company called Small Improvements developing large scale applications. The company offers a SaaS product that enables the customers to give feedback to their companies. This application is developed using JavaScript in the frontend and Java in the backend. In the frontend, the first iteration was written in Java with the Wicket Framework and jQuery. When the first generation of SPAs became popular, the company migrated to Angular 1.x for the frontend application. After using Angular for more than two years, it became clear that Angular wasn’t the best solution to work with state intense applications back in the days. That’s why the company made the final jump to React and Redux that has enabled it to operate on a large scale successfully.

During his time in the company, Robin regularly wrote articles about web development on his website. He received great feedback from people concerning his articles and that allowed him to improve his writing and teaching style. Article after article, Robin grew in his ability to teach others. His first article was packed with too much stuff which was quite overwhelming for students, but he improved it over time by focussing and teaching only one subject.

Nowadays, Robin is a self-employed teacher. He finds it to be a fulfilling activity seeing students thrive by giving them clear objectives and a short feedback loop. That’s one thing you would learn at a feedback company, wouldn’t you? But without coding himself, he wouldn’t be able to teach things. That’s why he invests his remaining time in programming. You can find more information about Robin and ways to support and work with him on his website.