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.
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.
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.
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:
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:
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:
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:
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.
Learn more, practice more!
React Native: how to split responsibilities across components
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:
I also recommend to follow these guys:
More interesting people to follow in the Dan Abramov’s React List.
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!
Check out our newsletter
© 2024 Red Panda Technology (dba datarockets). All Rights Reserved.
