The Road to learn React [eBook]

The Road to learn React 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. 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, Robin Wieruch, 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 around React. It explains general concepts, patterns and best practices in a real world React application.

You will learn to build your own Hacker News application. It covers real world features like pagination, client-side caching and interactions like 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.

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 13.000+ readers.

Get the Book

Testimonials

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.”

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.

What did people build after they have read the book?

I encourage developers to reach out after they have finished the book and build their first React applications. The following are an excerpt of projects. Reach out to showcase your applications!

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.

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

What you can expect (so far...)

  • 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
  • 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

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

  • 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.

  • Sample 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.

  • 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 to understand and learn the principles of code splitting, reusability, maintainability and module API design.

  • 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.

  • Asynchronous Requests: You can substitute the native fetch API with third-party alternatives to perform asynchronous requests: superagent or axios. There is no perfect solution to make asynchronous requests. But by exchanging the buildings blocks around React, you make the experience how powerful it can be to have this flexibility. In frameworks you usually stick to one solution. In a flexible ecosystem like React you can exchange the solutions.

  • 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 fetch the next page. The router will do everything for you on the client-side.

  • Type Checking: In one chapter, you have 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 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.

  • 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 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.

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 13.000+ readers.

Get the Book
comments powered by Disqus

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

Take Part

Join 7800+ Developers

Learn Web Development with JavaScript

Tips and Tricks

Access Tutorials, eBooks and Courses

Personal Development as a Software Engineer