Learn to walk before you run...
1. But First: Why Would You Want to Learn React.js in the First Place?
Mostly because it enables you to “mix and match” and to reuse simple pieces of functionality throughout your React web app.
There's no point in hiding that it does challenge you with a steeper learning curve, compared to other libraries. And that you might also get a bit discouraged, at first, by the need to write JSX.
Yet, once you're comfortable with it, the convenience of its reusable components will make up for all the time that you will have invested in learning its “wheels within wheels”.
And where do you add that:
- it's backed up by a striving open-source community
And I feel like repeating myself:
Learn to walk before you run!
So, if you're still confused by concepts such as:
- how to access an object
- what the falsy values are
Once you have, it's not just React, but other frameworks, too (although React is a library) — Vue.js or Angular — that you'll be able to learn, within weeks.
There's no way around it:
For, if somehow you've managed to put this aspect at the back of your “TO Do” list, you can't postpone it any longer now, when you're decided to learn React.js.
You'll be using it more often that you may like it when building web apps in React.
You can still make it without them. You can build your React web apps without knowing any of these features.
And speaking of these features, here's a shortlist including those that you should explore first, before learning React.js:
rest and spread
You might get away with developing your first React web app by relying solely on tutorials, by applying specific patterns found in certain courses.
6. Understand How the DOM Works: Learn How to Properly Manipulate It
Learning the underlying mechanics of the DOM before learning React.js is a MUST-DO!
For, after all, it's React that makes the most of the Virtual DOM, right? And you can't possibly jump to the virtual one if you don't have a deep knowledge of the “real” one.
So, do take some time to learn all about:
- the different methods that the DOM provides you with.
- traversing the DOM
- adding/removing listeners
- selecting elements
- changing classes and styles
- adding/removing things from the DOM
And while at this stage, challenge yourself with some practice tests, as well:
- try making a menu show up once a button gets clicked on
- try creating some... accordions, for instance
From a “copy-paste” level, do your best to reach the level where you're able to write your own components from scratch.
And strive to learn all about the very process taking place “under the hood” as you do that!
7. Learn About Object-Oriented Programming
Since fundamental OOP concepts like abstraction and encapsulation fit perfectly into the React app development process, it becomes crucial for you, too, to... explore them!
And practice is always the most effective way of learning. How about trying to design the code of your new React app the... OOP way and thus familiarizing yourself with it?
Note: before learning React.js you should consider learning how querying APIs from Twitter or/and Github works.
8. Explore the Concepts of Functional Programming
Immutability (“immutable data”) and pure functions! These are the functional programming concepts that you should try and get a good grasp of before learning React.js.
Speaking of which, “immutability” is a widely “exploited” concept in React:
- all React props are immutable — they can no longer be changed once created
- the state, too, is considered immutable; it should be updated exclusively by using the React setState function
9. You Take It from Here...
“How much of any language do you need to master before jumping into a framework/library that depends on it?”
And not just... apps.
As a starting point, I strongly recommend you Facebook's documentation. Then, feel free to complete it with curated learning resources for each one of the 7 concepts presented here.
Next, start making your first React app and remember to apply all the new practices you've learned so you can internalize all those underlying mechanics. Happy learning, happy coding!