The Road to learn React [React.js Book for 2018]

    Follow on Twitter   Follow on GitHub

The Road to learn React teaches the fundamentals of React. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained for you. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be able to build your own applications in React. The material is kept up to date by myself and the community.

In the Road to learn React, I offer a foundation before you dive into the broader React ecosystem. The concepts will have less tooling and less external state management, but a lot of information about React. It explains general concepts, patterns, and best practices in a real world React application.

Essentially, you will learn to build your own React application from scratch, with features like pagination, client-side caching, and interactions like searching and sorting. Additionally, you will transition from JavaScript ES5 to JavaScript ES6. I hope this book captures my enthusiasm for React and JavaScript, and that it helps you get started with it.

package

Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 190+ pages of learning material. Pay what you want like 33.000+ readers.

Get the Book

React Book Testimonials

There are many testimonials, ratings and reviews about the book that you can read to ascertain its quality. I am proud of it, and I never expected such overwhelming feedback. I would love to find your rating/review. It helps me to spread the word about the book and make improvements for future projects. The following shows a short excerpt of these voices:

Muhammad Kashif: “The Road to Learn React is a unique book that I recommend to any student or professional interested in learning react basics to advanced level. It is packed with insightful tips and techniques that are hard to find elsewhere, and remarkably thorough in its use of examples and references to sample problems, i have 17 years of experience in web and desktop app development, and before reading this book i was having trouble in learning react, but this book works like magic.”

Andre Vargas: “The Road to Learn React by Robin Wieruch is such an awesome book! Most of what I learned about React and even ES6 was through it!”

Nicholas Hunt-Walker, Instructor of Python at a Seattle Coding School: “This is one of the most well-written & informative coding books I’ve ever worked through. A solid React & ES6 introduction.”

Austin Green: “Thanks, really loved the book. Perfect blend to learn React, ES6, and higher level programming concepts.”

Nicole Ferguson: “I’m doing Robin’s Road to Learn React course this weekend & I almost feel guilty for having so much fun.”

Karan: “Just finished your Road to React. Best book for a beginner in the world of React and JS. Elegant exposure to ES. Kudos! :)”

Eric Priou: “The Road to learn React by Robin Wieruch is a must read. Clean and concise for React and JavaScript.”

Book FAQ

How to get updates? I have two channels where I share updates about my content. You can subscribe to updates by email or follow me on Twitter. Regardless of the channel, my objective is to only share quality content. Once you receive notification the book has changed, you can download a new version of it.

Does it use the recent React version? The book always receives an update when the React version is updated. Programming books are usually outdated soon after their release, but since this book is self-published, I can update it as needed.

Does it cover Redux? It doesn’t, so I have written a second book. The Road to learn React should give you a solid foundation before you dive into advanced topics. The implementation of the sample application in the book will show that you don’t need Redux to build an application in React. After you have read the book, you should be able to implement a solid application without Redux. Then you can read my second book, Taming the State in React, to learn Redux.

Does it use JavaScript ES6? Yes. Don’t worry, though, you will be fine if you are familiar with JavaScript ES5. All JavaScript ES6 features, that I describe in The Journey to Learn React, will transition from ES5 to ES6. The book does not only teach React, but also all useful JavaScript ES6 features.

What are the reading formats? In addition to the .pdf, .epub, and .mobi formats, you can read it in pure markdown on GitHub. In general, I recommend reading it on a suitable format, otherwise the code snippets will have ugly line breaks.

How can I get help while reading the book? The book has a Slack Group for people who are reading along. You can join the channel to get help, or to help others, as helping others may help you internalize your own understanding. If there is no one available to help you, you can always reach out to me.

Why is the book pay what you want? I have put a lot of effort into this and will do so in the future. My desire is to reach as many people as possible. Everyone should be enabled to learn React. Still you could pay, if you can afford it. In addition, the book attempts to support projects that educate children in the developing world. You can have an impact too.

How to support the project? If you believe in the content I create, you can support me. It also helps if you spread the word about this book, or you can sign on as my Patron on Patreon.

Is there a call to action? Yes. I want you to take a moment to think about a person who would be a good match to learn React. The person could have shown the interest already, could be in the middle of learning React or might not yet be aware about wanting to learn React. Reach out to that person and share the book. It would mean a lot to me. The book is intended to be given to others.

Education for Children

The book should enable everyone to learn React. However, not everyone has access to the required resources, because not everyone is educated in the English language. I want to use this project to support other projects that teach children English in the developing world.

Book Changelog

I keep the learning material up to date to the recent changes in the React ecosystem.

10. January 2017:

08. March 2017:

  • 20% more content
  • 25% improved content
  • 9 new chapters
  • 170 pages of learning material

15. April 2017:

  • upgrade to React 15.5.

5. July 2017:

  • upgrade to node 8.1.3
  • upgrade to npm 5.0.4
  • upgrade to create-react-app 1.3.3

17. October 2017:

  • upgrade to node 8.3.0
  • upgrade to npm 5.5.1
  • upgrade to create-react-app 1.4.1
  • upgrade to React 16
  • 15% more content
  • 15% improved content
  • 3 new chapters (Bindings, Event Handlers, Error Handling)
  • 190+ pages of learning material
  • +9 Source Code Projects

17. February 2018:

  • upgrade to node 8.9.4
  • upgrade to npm 5.6.0
  • upgrade to create-react-app 1.5.1
  • more learning paths
  • extra reading material
  • 1 new chapter (Axios instead of Fetch)
  • Amazon Print/E Book

31. August 2018:

3. October 2018:

  • upgrade to node 10.11.0
  • upgrade to npm 6.4.1
  • upgrade to create-react-app 2.0.2

What you can expect (so far...) from the React book

  • Hacker News App in React
  • no complicated configurations
  • create-react-app to bootstrap your application
  • efficient lightweight code
  • only React setState as state management
  • transition from JavaScript ES5 to ES6 along the way
  • the React API with setState and lifecycle methods
  • interaction with a real world API (Hacker News)
  • advanced user interactions
    • client-sided sorting
    • client-sided filtering
    • server-sided searching
  • implementation of client-side caching
  • higher order functions and higher order components
  • snapshot test components with Jest
  • unit test components with Enzyme
  • neat libraries along the way
  • exercises and more readings along the way
  • internalize and reinforce your learnings
  • deploy your app to production

Table of Contents

  • Introduction to React
    • Hi, my name is React
    • Requirements
    • node and npm
    • Installation
    • Zero-Configuration Setup
    • Introduction to JSX
    • ES6 const and let
    • ReactDOM
    • Hot Module Replacement
    • Complex JavaScript in JSX
    • ES6 Arrow Functions
    • ES6 Classes
  • Basics in React
    • Internal Component State
    • ES6 Object Initializer
    • Unidirectional Data Flow
    • Bindings
    • Event Handler
    • Interactions with Forms and Events
    • ES6 Destructuring
    • Controlled Components
    • Split Up Components
    • Composeable Components
    • Reusable Components
    • Component Declarations
    • Styling Components
  • Getting Real with an API
    • Lifecycle Methods
    • Fetching Data
    • ES6 Spread Operators
    • Conditional Rendering
    • Client- or Server-side Search
    • Paginated Fetch
    • Client Cache
    • Error Handling
    • Axios instead of Fetch
  • Code Organization and Testing
    • ES6 Modules: Import and Export
    • Code Organization with ES6 Modules
    • Snapshot Tests with Jest
    • Unit Tests with Enzyme
    • Component Interface with PropTypes
    • Debugging with React Developer Tools
  • Advanced React Components
    • Ref a DOM Element
    • Loading …
    • Higher Order Components
    • Advanced Sorting
  • State Management in React and beyond
    • Lifting State
    • Revisited: setState()
    • Taming the State
  • Final Steps to Production
    • Eject
    • Deploy your App
  • Outline

Finished the Book? My Recommendations to learn the React ecosystem

My recommended learning paths (extracted from the book) after you have read it:

  • Connecting to a Database and/or Authentication: In a growing React application, you may want to persist data eventually. The data should be stored in a database so it can survive after a browser session, and so it can be shared across different users using your application. The simplest way to introduce a database is Firebase. In this tutorial, you will find a step-by-step guide on how to use Firebase authentication in React. Beyond that, you can use Firebase’s realtime database to store user entities.

  • State Management: You have used React this.setState() and this.state to manage and access local component state. That’s a good start. In a larger application, however, you will experience the limits of React’s local component state. It is imperative you learn to use third-party state management libraries like Redux or MobX. On the Road to React platform, you will find the course “Taming the State in React” that teaches about advanced local state management using Redux and MobX. The course comes with an ebook as well, but I recommend you dive into the source code and screencasts too.

  • Tooling with Webpack and Babel: We used create-react-app to set up the application we created for this book. At some point you may want to learn the tooling around it, which enables you to setup your own project without create-react-app. I recommend a minimal setup with Webpack and Babel, after which you can apply additional tooling on your own. For instance, you could use ESLint to follow a unified code style.

  • Code Organization: Recall if you will the chapter about code organization. You can apply these changes now, if you haven’t already. It will help organize your components in structured files and folders (modules), and it will help you understand the principles of code splitting, reusability, maintainability, and module API design. Your applications will eventually grow and need to be structured into modules, so it’s better to start now.

  • Testing: The book only scratched the surface of testing. If you are not familiar with the topic, you should dive deeper into unit testing and integration testing, especially with React applications. I would recommend to stick to Enzyme and Jest for implementations, to refine your approaches with unit and snapshot tests.

  • React Component Syntax: The best practices for implementing React components evolve over time. You will find many ways to write your React components, especially React class components, in other learning resources. A GitHub repository called react-alternative-class-component-syntax is a great way to learn alternative ways to write React class components. By using class field declarations, you can write them even more concisely in the future.

  • UI Components: Many beginners make the mistake of introducing UI component libraries too early in their projects. It is more practical to learn how to implement and use a dropdown, checkbox, or dialog in React with standard HTML elements. Most of these components will manage their own local state. A checkbox has to know whether it is checked or unchecked, so you should implement them as controlled components. After we covered the foundational implementations, introducing a UI component library with checkboxes and dialogs as React components should be easier.

  • Routing: You can implement routing for your application with react-router. So far, there is only one page in your application. React Router helps manage multiple pages across multiple URLs. When you introduce routing to your application, you don’t make any requests to your web server to request the next page. The router will do everything for you on the client-side. So get your hands dirty and introduce routing in your application.

  • Type Checking: Earlier, we used React PropTypes to define component interfaces. It is a good practice to prevent bugs, but the PropTypes are only checked on runtime. You can go further by introducing static type checking at compile time. TypeScript and Flow are popular type systems for React.

  • React Native: React Native brings your application to mobile devices, such as iOS and Android applications. Once you’ve mastered React, the learning curve for React Native shouldn’t be that steep, as they share the same principles. The only difference with mobile are the layout components.


Now you should know everything what you can expect from the book. You can pay what you want, because I want to enable everyone to learn React. I would really appreciate your support on social media to reach as many people as possible to grab a version of the book. If you sign up for the Newsletter to grab yourself a version of the book, you should get a confirmation e-mail where you will find the URL to the course platform. There the book can be found as “The Bare Essentials” package without any pricing tag. Enjoy reading and I promise you will learn lots from it.

Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 190+ pages of learning material. Learn React like 33.000+ readers.

Get the Book for free
comments powered by Disqus

Never miss an article about web development, JavaScript and self-growth.

Take Part

Join 18.000+ Developers

Learn Web Development with JavaScript

Tips and Tricks

Access Tutorials, eBooks and Courses

Personal Development as a Software Engineer