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.
The Road to learn React comes as eBook and as interactive course.
The Road to learn React
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 6500+ readers.Get the Book
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.”
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.”
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.”
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.
- 11. April to 18. April, 2017, Giving Back, By Learning React
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 use the recent React version? Books are outdated pretty soon after their release. Since this book is self-published, I can update it whenever I want. In conclusion, I update the resource whenever there is a new React version.
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.
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.
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.
Can I support the project? Yes. Feel free to reach out or to support me. I invest a lot of my time into open source tutorials and learning resources. You can have a look at my about me page.
10. January 2017:
- even more beginner friendly
- 37% more content
- 30% improved content
- 13 improved and new chapters
- 140 pages of learning material
- interactive course of the book on educative.io
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.
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...)
- 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
- Deploy your App
- Final Words
Hi, my name is React.
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.
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>
-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
npm install --save <package>
--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
-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>
--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
You will encounter more npm commands on your way. But these will be sufficient for now.
- setup a throw away npm project
- create a new folder with
- navigate into the folder with
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
- create a new folder with
- 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
setStateto 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.
Pre-order: The Road to learn Redux
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
If you liked the article, you can share it and subscribe for updates.
The Road to learn React
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 6500+ readers.Get the Book