The Road to learn React [eBook]

I love to teach, even though I am no expert. I learn every day and I have the fortune to have great mentors. After all not everyone has the opportunity to learn from mentors and peers. The book is my attempt to give something back. It might help people to get started and advance in React.

But why me? In the past I have written a large tutorial to implement a SoundCloud Client in React + Redux. I never expected the overwhelming reaction. I learned a lot during the process of writing. But even more by getting your feedback. It was my first attempt to teach people in programming.

It also taught me to do better. I realized the SoundCloud tutorial is suited for advanced developers. It uses several tools to bootstrap your application and dives quickly into Redux. Still it helped a lot of people to get started. In my opinion it is a great tutorial to get a bigger picture of React + Redux. I use every free minute to improve the material, but it is time consuming.

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.

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 on the way. In conclusion, the book should give you a solid foundation in React before you dive into more advanced topics like Redux. I hope this book captures my enthusiasm for React and JavaScript and helps you to get started.

The Road to learn React comes as eBook and as interactive course.

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

Get the Book

Testimonials

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

  • Goodreads Review: “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 my Newsletter or follow me on Twitter to get updates. It keeps me motivated to continue. Once you have a copy of the book, it will stay updated. But you have to download the copy again when an update is announced. I will notify everyone by a Newsletter and Twitter.

Does it cover Redux? It doesn’t. The book should give you a solid foundation before you dive into advanced topics. Still the implementation in the book will show you that you don’t need Redux to build an application. After you have read the book, you should be able to implement a solid application without Redux. You can pre-order my next book to support me: The Road 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 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.

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 - because it already took me a lot of my time to write and improve the book.

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 all the time. 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. I would love to hear your thoughts about possible chapters to improve and enrich the learning experience.

Changelog

10. January 2017:

08. March 2017:

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

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
  • Basics in React
    • Internal Component State
    • ES6 Object Initializer
    • Unidirectional Data Flow
    • 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
  • Code Organization and Testing
    • ES6 Modules: Import and Export
    • Code Organization with ES6 Modules
    • Component Interface with PropTypes
    • Snapshot Tests with Jest
    • Unit Tests with Enzyme
  • 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
  • Final Words

Book Preview

Hi, my name is React.

Why should you bother to learn React? In recent years single page applications (SPA) have become popular. Frameworks like Angular, Ember and Backbone helped JavaScript developers to build modern web applications beyond the usage of jQuery. The list is not exhaustive. There exists a wide range of SPA frameworks. When you consider the release dates, most of them are among the first generation of SPAs: Angular 2010, Backbone 2010, Ember 2011.

The initial React release was 2013 by Facebook. React is not an SPA framework but a view library. It is the V in the MVC (model view controller). It only enables you to render components as viewable elements in a browser. Yet the whole ecosystem around React makes it possible to build single page applications.

But why should you consider using React over the first generation of SPA frameworks? While the first generation of frameworks tried to solve a lot of things at once, React only helps you to build your view layer. It’s a library and not a framework. The idea behind it: Your view is a hierarchy of composeable components.

In React you can focus on your view before you introduce more aspects to your application. Every other aspect is another building block for your SPA. These building blocks are essential to build a mature application. They come with two advantages.

First you can learn the building blocks step by step. You don’t have to worry about understanding them altogether. It is different from a framework that gives you every building block from the start. This book focuses on React as the first building block. More building blocks follow eventually.

Second all building blocks are interchangeable. It makes the ecosystem around React such an innovative place. Multiple solutions are competing with each other. You can pick the most appealing solution for you and your use case.

The first generation of SPA frameworks arrived at an enterprise level. They are more rigid. React stays innovative and gets adopted by multiple tech thought leader companies like Airbnb, Netflix and of course Facebook. All of them invest in the future of React and are content with React and the ecosystem itself.

React is probably one of the best choices for building single page applications nowadays. It only delivers the view layer, but the React ecosystem is a whole flexible and interchangeable framework. React has a slim API, an amazing ecosystem and a great community. You can read about my experiences why I moved from Angular to React. I highly recommend to have an understanding why you would choose React over another framework or library. After all everyone is keen to experience where React will lead us in 2017 and beyond.

Requirements

Before you start to read the book, you should be familiar with HTML, CSS and JavaScript (ES5). The book will teach JavaScript ES6 and beyond. If you are coming from a different SPA framework or library, you should already be familiar with the basics. If you have just started in web development, you should feel comfortable with HTML, CSS and JavaScript ES5 to learn React.

Every developer needs tools to build applications. You will need an editor (IDE) and terminal (command line) tool. You can read my developer setup to organize your tools: Developer Setup. It is adjusted for Mac users, but you can substitute most of the tools for other operating system.

The editor is used to organize and write your code. The terminal is used to execute commands. A command can be to start your application, to run tests or to install other libraries for your project.

Last but not least you will need an installation of node and npm. Both are used to manage libraries you will need along the way to learn React. You will install external node packages via npm (node package manager). These node packages can be libraries or whole frameworks.

You can verify your versions of node and npm on the command line. If you don’t get any output in the terminal, you need to install node and npm first. These are my versions:

node --version
*v7.4.0
npm --version
*v4.0.5

node and npm

This chapter gives you a little crash course in node and npm. It is not exhaustive, but you will get all the necessary tools. If you are familiar with both of them, you can skip the chapter.

The node package manager (npm) allows you to install external node packages from the command line. These packages can be a set of utility functions, libraries or whole frameworks. They are the dependencies of your application. You can either install these packages to your global node package folder or to your local project folder.

Global node packages are accessible from everywhere in the terminal and you have to install them only once. You can install a global package by typing in your terminal:

npm install -g <package>

The -g flag tells npm to install the package globally. Local packages are used in your application. For instance, React as a library will be a local package which can be required in your application for usage. You can install it via the terminal by typing:

npm install <package>

In the case of React it would be:

npm install react

The installed package will automatically appear in a folder called node_modules/. But be careful. Whenever you install a local package you shouldn’t forget the neat --save flag:

npm install --save <package>

The --save flag tells npm to store the package requirement in a file called package.json. The file can be found in your project folder.

Not every project folder comes with a package.json file though. There is a npm command to initialize a npm project and thus a package.json file. Only when you have that file, you can install new local packages via npm.

npm init -y

The -y flag is a shortcut to initialize all the defaults in your package.json. If you don’t use it, you have to decide how to configure the file.

One more word about the package.json. The file enables you to share your project with other developers without sharing all the node packages. The file has all the references of node packages used in your project. These packages are called dependencies. Everyone can copy your project without the dependencies. The dependencies are references in the package.json. Someone who copies your project can install all packages by using npm install on the command line.

I want to cover one more npm command to prevent confusion:

npm install --save-dev <package>

The --save-dev flag indicates that the node package is only used in the development environment. It will not be used in production when you deploy your application on a server. What kind of node package could that be? Imagine you want to test your application with the help of a node package. You need to install that package via npm, but want to exclude it from your production environment. There you don’t want to test your application anymore. It should be tested already and work out of the box for users. That’s only one use case where you would want to use the --save-dev flag.

You will encounter more npm commands on your way. But these will be sufficient for now.

Exercises:

  • setup a throw away npm project
    • create a new folder with mkdir <folder_name>
    • navigate into the folder with cd <folder_name>
    • execute npm init -y
    • install a local package like React with npm install --save react
    • have a look into the package.json file and the node_modules/ folder
    • find out how to uninstall the react node package
  • read more about npm

Finished the Book? My Recommendations

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

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

  • 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 stick to one solution, in a flexible ecosystem like React you can exchange the solutions.

  • 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 in your editor. TypeScript is one popular approach. But in the React ecosystem people prefer to use Flow. I can recommend to give Flow a shot.

  • Tooling with Webpack and Babel: You have setup your application with create-react-app. At some point, when you learned React, you want to learn the tooling around it to setup your own project without create-react-app. I can recommend to follow a minimal setup with Webpack and Babel. Afterward you could setup ESLint to follow a unified code style in your application.

  • State Management: You have used React setState to manage internal component state. That’s a perfect start. However, in a scaling application you will experience the limits of internal component state. Therefore you have third party state management libraries like Redux or MobX.

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


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 there is enough interest and support, I would love to teach you Redux as a state management solution. It would be a walkthrough from the problem of state handling to an exhaustive solution with Redux.

Pre-order

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

Get the Book
comments powered by Disqus

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

Newsletter

Comprehensive Guides

Tips and Tricks

Recent Blog Releases

Quality over Quantity