How Much Javascript To Learn React

That you lot can't tackle React earlier you've learned JavaScvript is an... universally accustomed truth . Only how much of it more precisely? How much JavaScript do you need to know before learning React.js? Is a reasonable grasp of the fundamentals plenty or should y'all be able to... write your components from scratch?

Is "having a clue" about the JavaScript syntax more than than enough for jumping into a JavaScript library like React? Or information technology is necessary to dive way deeper into JS? To learn all most the DOM, to gain a good grasp of the object-oriented and functional programming concepts and so on?

Learn to walk before y'all run...

Well, let me give yous some clues hither! So you lot should fix your "boxing plan" for "conquering" primal JavaScript aspects before y'all actually swoop into your first React tutorial.

A list, in fact, including vii concepts that you should focus on forth your roadmap to learning JavaScript (earlier learning React.js):

one. But First: Why Would You Want to Acquire React.js in the Kickoff Place?

Generally because it enables yous to "mix and match" and to reuse simple pieces of functionality throughout your React web app.

There'south no point in hiding that it does challenge y'all with a steeper learning bend, compared to other libraries. And that you might also get a fleck discouraged, at first, past the demand to write JSX.

Yet, in one case you're comfortable with information technology, the convenience of its reusable components volition make up for all the fourth dimension that y'all will have invested in learning its "wheels within wheels".

And where practise you add that:

it'south a JavaScript library created and actively maintained by Facebook itself
it's backed upwardly past a striving open up-source customs

ii. Master the Fundamentals of JavaScript Syntax, First Things Get-go

And I experience like repeating myself:

Larn to walk before you run!

React developers volition seek to leverage the newest, the very best of JavaScript features. So, trying to "compete" with them, to brand your React app stand out, past mimicking that you do grasp the fundamentals of JS, won't get you too far too soon.

You'd amend footstep back and larn patently, vanilla JavaScript before you jump straight to the latest features.

For a "acquire as you go" strategy won't turn out to be very productive. It volition merely widen those holes in your knowledge of Javascript and make assimilating whatever new feature twice as challenging.

So, if you're even so dislocated past concepts such as:

how to access an object
what JavaScript primitive types are
what the falsy values are
cardinal concepts of JavaScript: arrays, functions, objects

… and so information technology'south time to invest time in getting a good grasp of the basic principles of JavaScript earlier learning React.js.

Once y'all have, it's not simply React, but other frameworks, too (although React is a library) — Vue.js or Angular — that you'll exist able to learn, within weeks.

iii. Understand JavaScript "This"

There'south no way effectually information technology:

You must proceeds a total agreement of how to properly use "this" when writing code in JavaScript.

For, if somehow y'all've managed to put this aspect at the dorsum of your "TO Do" list, you can't postpone it any longer at present, when you're decided to larn React.js.

You'll exist using it more often that you may similar it when building web apps in React.

And so, afterward yous've learned/reviewed your fundamentals in JavaScript, get to know how "this" works.

4. Larn About the ES2015 JavaScript Features

Yous can still make information technology without them. You can build your React spider web apps without knowing any of these features.

Notwithstanding, you lot can't await to get upwards to speed on React if you skip the latest changes in JavaScript.

And speaking of these features, here'south a shortlist including those that you should explore commencement, before learning React.js:

```
let
```
```
arow functions
```
```
const
```
```
balance and spread
```
```
object destructuring
```
```
object.assign
```
```
class syntax            
```

5. Acquire to Solve Problems in JavaScript Earlier Learning React.js

Yous might go away with developing your beginning React spider web app by relying solely on tutorials, by applying specific patterns found in sure courses.

Withal, don't wait those tutorials to be of any help when it's a serious JavaScript coding claiming that yous'll bump into!

My signal here: be both a hard-working and a clever JavaScript pupil and learn to solve bug in JavaScript before learning React (or any other view framework)!

vi. 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-Practise!

For, later on all, it's React that makes the most of the Virtual DOM, correct? And you can't possibly jump to the virtual one if you lot don't have a deep knowledge of the "real" ane.

So, do take some fourth dimension to larn all well-nigh:

the dissimilar methods that the DOM provides y'all with.
traversing the DOM
adding/removing listeners
selecting elements
irresolute classes and styles
adding/removing things from the DOM

And while at this stage, claiming yourself with some practice tests, equally well:

try making a card show upwards once a push gets clicked on
endeavour creating some... accordions, for instance

From a "copy-paste" level, do your best to accomplish the level where y'all're able to write your own components from scratch.

And strive to larn all about the very process taking place "under the hood" as you do that!

7. Learn Near Object-Oriented Programming

Since fundamental OOP concepts like brainchild and encapsulation fit perfectly into the React app evolution process, it becomes crucial for you, likewise, to... explore them!

And practice is e'er the most effective way of learning. How about trying to design the lawmaking of your new React app the... OOP way and thus familiarizing yourself with it?

Annotation: earlier learning React.js y'all should consider learning how querying APIs from Twitter or/and Github works.

8. Explore the Concepts of Functional Programming

Immutability ("immutable information") and pure functions! These are the functional programming concepts that you should effort and get a good grasp of earlier 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 exist updated exclusively by using the React setState role

ix. You Take It from Here...

"How much JavaScript before React?" comes down to:

"How much of any language do you demand to master before jumping into a framework/library that depends on it?"

You don't need to speak fluently in JavaScript before learning React.js! Yet, you should all the same make this your goal if it's high performant, unique web apps that you desire to develop in React.

And not just... apps.

As a starting bespeak, I strongly recommend you Facebook's documentation. Then, experience gratis to complete it with curated learning resources for each ane of the 7 concepts presented here.

Side by side, starting time making your outset React app and remember to apply all the new practices y'all've learned so yous can internalize all those underlying mechanics. Happy learning, happy coding!