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

I was devastated hearing the news about what happened on Lombok in the last couple of days. Having lived in Bali for the last few months, I have a huge bond with the Indonesian country and all of its islands. That’s why I want to help the amazing organisation Lombok Strong. And so can you! If you feel like doing something good, please support them. Every donation helps!

The Road to learn React book teaches you the fundamentals of React. You will build a real world application along the way 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 me and the community.

In the Road to learn React, I want to offer a foundation before you start to dive into the broader React ecosystem. It has 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.

You will learn to build your own React application. It covers real world features like pagination, client-side caching and interactions such as searching and sorting. Additionally, you will transition from JavaScript ES5 to JavaScript ES6 along the way. I hope this book captures my enthusiasm for React and JavaScript and helps you to 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 which should confirm the quality of it. I am so proud of it, because I never expected such an overwhelming feedback. If you enjoy the book as well, I would love to find your rating/review somewhere as well. It helps me to spread the word about the book. The following shows a short excerpt of these good 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.”

A Rookie Developer: “I just finished the book as a rookie developer, thanks for working on this. It was easy to follow and I feel confident in starting a new app from scratch in the coming days. The book was much better than official React.js tutorial that I tried earlier (and couldn’t complete due to lack of detail). The exercises at the end of each section were very rewarding.”

Student: “The best book to start learning ReactJS. The project moves along with the concepts being learnt which helps to grasp the subject. I have found ‘Code and learn’ as best way to master programming and this book exactly does that.”

Thomas Lockney: “Pretty solid introduction to React that doesn’t try to be comprehensive. I just wanted a taste to understand what it was about and this book gave me exactly that. I didn’t follow all the little footnotes to learn about the new ES6 features I’ve missed (“I wouldn’t say I’ve been missing it, Bob.”). But I’m sure for those of you who have fallen behind and are diligent about following those, you can probably learn a lot more than just what the book teaches.”

Book FAQ

How do I get updates? You can subscribe to the Newsletter or follow me on Twitter for updates. Once you have a copy of the book, it will stay updated when a new edition gets released. But you have to grab the copy again when an update is announced.

Does it use the recent React version? The book always receives an update when the React version got updated. Usually books are outdated pretty soon after their release. Since this book is self-published, I can update it whenever I want.

Does it cover Redux? It doesn’t. Therefore 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 to learn Redux.

Does it use JavaScript ES6? Yes. But don’t worry. You will be fine if you are familiar with JavaScript ES5. All JavaScript ES6 features, that I describe on the journey to learn React, will transition from ES5 to ES6 in the book. Every feature along the way will be explained. The book does not only teach React, but also all useful JavaScript ES6 features for React.

Will you add more chapters in the future? You can have a look at the Change Log chapter for major updates that already happened. There will be unannounced improvements in between too. In general, it depends on the community whether I continue to work on the book. If there is an acceptance for the book, I will deliver more chapters and improve the old material. I will keep the content up to date with recent best practices, concepts and patterns.

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 the book. You can join the channel to get help or to help others. After all, helping others can improve your learnings too.

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.

Can I support the project? Yes. Feel free to reach out. I invest a lot of my time into open source tutorials and learning resources. You can have a look at my about me page. I would love to have you 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 is open source and should enable everyone to learn React. However, not everyone is privileged to use open source resources, because not everyone is educated in the English language in the first place. Even though the book is pay what you want, I want to use it to support 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

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 (so far...)
  • 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
  • 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:

  • State Management: You have used React this.setState() and this.state to manage and access local component state. That’s a perfect start. However, in a larger application you will experience the limits of React’s local component state. Therefore you can use a third-party state management library such as Redux or MobX. On the course platform Road to React, you will find the course “Taming the State in React” that teaches advanced local state in React, Redux and MobX. The course comes with an ebook as well, but I recommend everyone to dive into the source code and screencasts too. If you liked this book, you should definitely checkout Taming the State in React.

  • 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 that it can survive after a browser session and be shared across different users using your application. The simplest way to introduce a database is using Firebase. In this comprehensive tutorial, you will find a step by step guide on how to use Firebase authentication (sign up, sign in, sign out, …) in React. Beyond that, you will use Firebase’s realtime database to store user entities. After that, it’s up to you to store more data in the database which is needed by your application.

  • Tooling with Webpack and Babel: In the book you have used create-react-app to set up your application. At some point, when you have learned React, you might want to learn the tooling around it. It enables you to setup your own project without create-react-app. I can recommend to follow a minimal setup with Webpack and Babel. Afterward, you can apply more tooling on your own. For instance, you could use ESLint to follow a unified code style in your application.

  • React Component Syntax: The possibilities and best practices to implement React components evolve over time. You will find many ways to write your React components, especially React class components, in other learning resources. You can checkout this GitHub repository to find out about an alternative way to write React class components. By using the class field declarations, you can write them even more concise in the future.

  • Other Projects: After learning plain React, it is always good to apply the learnings first in your own projects before learning something new. You could write your own tic-tac-toe game or a simple calculator in React. There are plenty of tutorials out there that use only React to build something exciting. Check out mine about building a paginated and infinite scrolling list, showcasing tweets on a Twitter wall or connecting your React application to Stripe for charging money. Experiment with these mini applications to get comfortable in React.

  • UI Components: You shouldn’t make the mistake to introduce too early a UI component library in your project. First, you should learn how to implement and use a dropdown, checkbox or dialog in React with standard HTML elements from scratch. The major part of these components will manage their own local state. A checkbox has to know whether it is checked or not checked. Thus you should implement them as controlled components. After you went through all the foundational implementations, you can introduce a UI component library which gives you checkboxes and dialogs as React components.

  • Code Organization: On your way reading the book, you came across one chapter about code organization. You could apply these changes now, if you haven’t done it yet. It will organize your components in structured files and folders (modules). In addition, it helps you to understand and learn the principles of code splitting, reusability, maintainability and module API design. Eventually your application will grow in size and you will need to structure it in modules. So it’s better you get started now.

  • Testing: The book only scratched the surface of testing. If you are not familiar with the general topic, you could dive deeper into the concepts of unit testing and integration testing, especially in context of React applications. On an implementation level, I would recommend to stick to Enzyme and Jest in order to refine your approach of testing with unit tests and snapshot tests in React.

  • Routing: You can implement routing for your application with react-router. So far, you only have one page in your application. React Router helps you to have 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: In one chapter, you have used React PropTypes to define component interfaces. It is a general good practice to prevent bugs. But the PropTypes are only checked on runtime. You can go one step further to introduce static type checking on compile time. TypeScript” is one popular approach. But in the React ecosystem, people often use Flow. I can recommend to give Flow a shot, if you are interested to make your application more robust.

  • React Native: React Native brings your application on mobile devices. You can apply your learnings from React to ship iOS and Android applications. The learning curve, once you have learned React, shouldn’t be steep in React Native. Both share the same principles. You will only encounter different layout components on mobile than you are used to in web applications.


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.

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
comments powered by Disqus

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

Take Part

Join 15.000+ Developers

Learn Web Development with JavaScript

Tips and Tricks

Access Tutorials, eBooks and Courses

Personal Development as a Software Engineer