Photo by Daniel Leone on Unsplash

TLDR;

This article is not intended to “teach you react in 5 minutes” instead it gives a fishing rod, not a fish. So, prepare your patience and focus, you’ll need that.

Beginning

So, how to start? That’s one the most painful question for me when I try to learn a new framework. Well, you can read all the docs, try all the examples, polish your “TODO app” but by the end, there could be not enough understanding of how things work.

Did I learn enough to start with real apps?

Is there something that I missed or simply got wrong?

And there are lots of questions like that, to answer them you need to spend way more time or find a mentor.

This article describes a way to learn react that will help you to gain more experience in a relatively short time, which will be just enough to start with real apps. Also, that will make your way smoother with learning things like react-router or redux.

Mental framework

The best way to learn something is to build your mental framework, that will guide you through complicated cases, that not described in docs. A method that I use to develop that framework is to deliberately read the docs, just as a book and trying most of the code examples. That helps to create a map for the structure that you will enrich with details as you go. Don’t worry if something looks way too complicated, just put it aside, try to read another chapter and return to that hard thing the next day.

Don’t try to crack a hard topic from the first attempt, give it some time, like 20–30 minutes or so, if it still hard to get then leave it for a while. Make a tea or have a walk, your brain will figure out things in the background. Use Google or Stack Overflow, if you believe that docs aren’t clear enough, or check other resources, like this super-nice react handbook.

After spending some time with documentation you’ll find that you have some basic understanding of how things work. That might be just enough to start with apps, but before practicing, test yourself: try to give a clear definition to each of next terms:

JSX Virtual Dom React.Component React.PureComponent Functional Component Public/Static members of a class render (method) ReactDOM.render state constructor setState props propTypes defaultProps Component Lifecycle Events Components Composition Higher-Order Components Render Props Context Portal Ref

Some of the things above are from “advanced concepts” chapter of the React docs. But I meet them all the time during development and they are becoming essential for real-world apps.

If some of the terms above are still hard to get, again, leave them aside and return next day, use Google, Stack Overflow or anything else you find helpful. But, don’t give up, try again and again, until you get that at least on some basic level.

Practice

By this point, you should know something. Good. And, might be, even thinking about implementing your own TODO-app. Don’t do that. I suggest starting with some elemental things, which you’ll see a lot in react apps development.

There is a template project to start with React components. It has simple babel , and webpack setup, and very handy for trying little react things.

I looked through my projects and compiled a short list of them:

A simple Functional Component that renders the current day of the week. A Class Component that uses functional components composition to render hello world A Class Component that triggers alert() on the mount A Component that receives new props every second and uses shouldComponentUpdate to avoid re-render if props are not changed A Component that handles events of one of elements it renders (onClick for example) A Component that renders a list of 500 elements (list data can be generated outside of a component) Higher Order Component (HOC) that provides mouse coordinates. A component that re-renders itself every second and randomly chooses a component to render from a set of 5–10. Cleanup mess using componentWillUnmount (create that mess on a component mount) A Context that defines default background color and component that randomly updates that color on click on a button A component that adds meta-tags to document head (Mutates DOM directly), updates them on props update and deletes on un-mount A Render props Component that provides current date/time A component that uses Portal to render custom meta-tags An Uncontrolled Component that triggers alert with content from <input/> on Form submit

Try to solve as many as you can without googling for solutions. Even if the answer is not ideal, you don’t like it, that’s ok, you always can get back and rewrite.

Even more Practice

Your next step will be solving technical challenges. Try to google and find as many of them as you can. Ask your friends for challenges they been implementing for interviews, look for websites like https://codesignal.com/

Here are some of the challenges found from the first google page: https://github.com/kkvesper/react-test-task https://github.com/uber/coding-challenge-tools

https://daveceddia.com/react-practice-projects/ https://developerjobsboard.co.uk/2018/07/28/an-example-senior-react-redux-developer-task/ https://www.learnstorybook.com/react/en/simple-component/

Questions: https://github.com/sudheerj/reactjs-interview-questions

It is ok if you fail to solve a problem from the first attempt. Leave that task for a while, then get back after trying another one or just the next day. After completing all of them from your list, look back and review your solved ones. I guarantee you’ll find that most of them have lots of room to improve, take that opportunity and rewrite/fix/refactor them.

What’s next?

That’s up to you. You can start learning more advanced things like routing, state management, and API server interactions. Also, you can look for setting your mindset for developing apps that meant to stand the test of time and your human teammates, here is an introduction article for that. And finally, there is an article about how we structure our apps.

If you have any questions, or if you feel like this article missing some crucial details, I would love to hear your feedback! Cheers!