React. Quick Start

Everyone was a newbie in some field. And there is no way to become a pro in an hour. In this article, I’m going to give you a roadmap to react quick start.

The most important and, unfortunately, the hardest part is deciding which order you should learn in, and separating good resources from bad ones. I had this challenge. There wasn’t a lighthouse to show me the way, so it was the way of trial and error to find what I should focus on and what I should ignore.

Learn HTML & CSS and the basics of JS

First and foremost, I hope that you know HTML & CSS and the basics of JS, especially ES6. You should know how to use ES6 classes, instance level arrow functions, and how inheritance works before the React quick start.

Step 0. Install React

The hardest part of every journey is the first step! In our case it is the zero step – install an environment. To make it as fast as possible, use create react app.

You’ll get all things you need, and start learning React without friction with a setup part of development.

Step 1. Learn the React basics

At this step, it will be enough to read the official React guide. Everything you need is there.

Use these code examples as samples, and create your own app by upgrading these code snippets. Pay attention to the rendering of lists, and lifecycle methods.

Before you move further… check:

1. What is the difference between props and state?
2. How can we hide some block of JSX under a condition?
3. Why should we use keys?

Step 2. Learn the React best practices

In the React community, we use the techniques from Functional Programming such as pure functions, immutability, explicit dataflow, etc. For example, you should use .map/.filter/.reduce instead of for loop in the matter of immutability.

Well, to keep things simple, I’d recommend to read the ‘React “Aha” Moments‘ article and take some notes from it. This article will give you the React way of thinking.

Also, reread the following article from the React official docs.

Check my thoughts on how to arrange methods inside a component.

Ask yourself:

1. What is the inverse data flow?
2. What the difference between containers and represental components?
3. How should we use the children prop?

Step 3. Learn React & Redux stack

Of course, it’s harder than just using React for creating some small apps, but in the real development world, Redux is the essential part of any React app, not just attachment. And, of course, there are a lot of other flux-like frameworks, but Redux gives you the simplest way to keep an application state of any scale. Don’t run into this stuff now and start with so-called container components. When you feel it is not meeting your expectations, start using Redux in learning apps and you’ll see how it helps.

Read the official Redux guide.

Check yourself:

1. Try to draw the React-Redux work cycle. Check this.
2. When do middlewares come in?

Step 4. Learn React + React Router stack

It goes without saying that we live in the epoch of the web applications, but it’s still web and it’s very important to divide apps by routes to add more semantics. For instance, a route for your blog post /posts/42, or your profile /profile, etc.

Of course, don’t fall into this and push Router everywhere. First, you should experience the problem of the route-less and then you’ll feel how it will make your application smarter and user-friendly.

Read the official React Router guide, and the following article.

Ask yourself:

1. What is the difference between absolute and relative paths?
2. How do the nested routes render?

Step 5. Reuse components

To keep your code clean, you should create a component that you can reuse. It’s obvious, but there’s another part of the ‘Reuse components’ principle: don’t be afraid of third-party components. Use the components that were created by other developers because they’ll save you time.

You should also take into consideration the fact that any third-party component is a dependency.

And discover how it works, because you’ll learn from others best practice and principles.

A short list of available components is here.

Step 6. Keep moving and practice more

Learn more, practice more!

• Create apps that will solve your problems and make your life more comfortable.
• Read articles about React and its environment. Check authors, and follow them on Twitter. Check this for example.
• Don’t be afraid of some strange techs, such as Redux Sagas, or Redux Observables. Use them, and you’ll love them ❤️
• Investigate the static typing in JS using Flow or Typescript.
• Learn React Native to feel the real power of React in the mobile dev field.

React Native: how to split responsibilities across components

Step 7. Be in the heart of the community

We live in the IT age and it’s hard to learn something if you are isolated. You should go to conferences and follow interesting people on Twitter. In general, keep track of the community life, and you’ll always be in-demand as a developer.

I recommend to check these repos from time to time:

Awesome-react
React-redux-links

I also recommend to follow these guys:

• Mike Grabowski
• Tyler McGinnis
• ReactGuru
• ReactJS_News
• Sebastian Markbåge
• David Nolen

More interesting people to follow in the Dan Abramov’s React List.

Wrapping up

If you want to do something, do it well! Don’t be afraid, keep moving, widen your horizons, and learn from other people to evolve yourself. Enjoy your quick start!