DEV Community

Nico Zerpa (he/him)
Nico Zerpa (he/him)

Posted on • Originally published at nicozerpa.com

Should You Really Learn Vanilla JavaScript Before React?

"Learn the basics before you learn React", they say. But if you're a beginner who's learning with React first, you probably start to worry. You might start asking if you're learning everything the wrong way.

The thing is, if you're learning React before the basics, chances are that you're doing it right. And that's because it all boils down to your personal learning style.

Basically, devs can learn things in two ways: bottom-up and top-down. A bottom-up learner feels more comfortable learning the basics (i.e. JavaScript, HTML, or CSS) first. They only start learning the libraries after they feel confident with the fundamentals.

On the other hand, a top-down learner prefers learning the frameworks first. The framework patterns help them learn the fundamental libraries and languages under the hood.

What's Your Learning Style?

And now, the question is: what's the best learning style for you? Of course, there's no one-size-fits-all answer, you'll have to find the answer for yourself.

The best way to find out is to try both approaches, and check which method helped you learn better. Or if you're already trying to learn things and you're facing too many challenges, try the opposite approach.

The only caveat here is: some top-down learners might put off learning the fundamentals, even after they became proficient with the framework. I strongly recommend that you don't put off learning the fundamentals.

Learning the basics helps you a lot when you have to find and fix bugs in your code. No matter if you learn them before or after, what counts is that you do know them.


Become a Better JavaScript Developer! My newsletter has easy, actionable steps to level up your JavaScript skills, right to your inbox. Click here to subscribe

Top comments (15)

Collapse
 
ludamillion profile image
Luke Inglis

I think it's fine to learn React before vanilla JS. However, if someone learns this way they really shouldn't believe that they 'know' JS or HTML or CSS. Learning a framework's flavor is fine as an entry point but doesn't give you everything you need to know.

In other words; if you learn vanilla JS/HTML/CSS first you will have no trouble picking up React or any other framework but if you learn React first and then want to learn another framework or vanilla JS there will be some amount of unlearning 'the React way'. Additionally understanding the language 'underneath' a framework can be very helpful in understanding how it works and why certain design choices might have been made.

This is important because nothing lasts forever. When I started out there were job postings for jQuery developers. Not too many of those these days. Being a 'React Developer' is not a great career idea in the long run. JS is the only language that runs in the browser and it will never hurt you to know it well.

Collapse
 
sabbirsobhani profile image
Sabbir Sobhani

Totally agreed

Collapse
 
hyggedev profile image
Chris Hansen

I think your progress would slowdown or come to a halt in my opinion. React is mostly just JavaScript right? So if you're learning React, you'd be learning JavaScript at the same time and probably come to meet many obstacles. JSX is essentially HTML too, so in my honest opinion, learning the core languages, including css, so you can use dynamic styling, would be more beneficial in the long run! 👌

Collapse
 
ishanpro profile image
Ishan Tiwari

Learning a framework before learning the language can have a very bad impact on the person.

Me for example learned Django before I was even an intermidiate python programmer. I messed up imports and spent hours and hours dealing with the simplest bugs.

I would say if you are learning javascript learn its advanced concepts before starting off with any framework like React, Angular, Vue whatever.

Doing this will prove more beneficial to you because you will save days and months of useless googling.

Collapse
 
rckshnv profile image
Толик • Edited

familiarity with vanilla JS will give you benefits in making shorter functions and prevent you from some potential errors. For exampe, if you know you can pass a function without calling it, you won't try to call it when passing inside the JSX event listener.

I am a vanilla JS developer coming to React and I already can create quite complex logic just from my background and some React tutorials/documentation. For me learning React first is a nonsense since at some point you will have to learn JS.

There's an excellent book "Learning Javascript (3rd edition)" by Ethan Brown. I myself learned JS slowly for 2 years, but almost everything I learned from various courses and tutorials can be found in this book!

Collapse
 
charliejoel profile image
Charlie Joel

While agree learning React can help beginners to understand how applications are structured, I don't think it's a case of either or.

At the end of the day React is vanilla javascript, it's just a library on top of it. If you can't make use of JS features like object destructuring or how to properly use data structures, you're going to miss out big time.

But if it helps beginners to get where they wanna go faster, it's a good thing! Just make sure you're making an effort to understand how and why react works as you go

Collapse
 
camco profile image
Camco

Is it possible, yes.
Is it ideal? I'd say no way.

Deep Understanding fundamentals is key to building quality code. Frameworks are great. They are fast tracks, and should not be view as "shortcuts".

Collapse
 
rish15 profile image
rish srivastav

I followed top down approach learnt angular first and never really focused on vanilla js
what's important to know is frameworks are wrappers around vanilla js so if you follow either approach it's fine IMO.

Collapse
 
owenmelbz profile image
Owen Melbourne

Totally depends on your out-look. As a hiring manager, seeing somebody that only knows "React" and not fundamentals, makes them massively less flexible and restricts their usefulness.

Having somebody who knows Javascript and React suddenly becomes much more appealing hire.

React code is very confusing compared to vanilla javascript, which can lead to being overwhelmed not knowing what is react, what is javascript, why does this say "(event) =>" and why does this say "event =>", why does "this" change when using => - without knowing the language fundamentals it can make this massively harder to understand, because you just end up memorising patterns rather understanding what your writing.

100% people have their own learning styles, but the most successful people in life have deep understanding in their subjects, so it is vital to learn the fundamentals "as well".

Collapse
 
buphmin profile image
buphmin

🤔 Hmm not sure. While I am far from a react advocate, as seen in other comments, there are parts that are close enough that you would learn a lot of the JS meat and potatoes as you learn react. I started off learning jQuery myself, which is not vanillajs. Granted jQuery is closer to raw js than react imo.

Collapse
 
bradwestfall profile image
Brad Westfall

I wrote an article that helps people focus on the JS parts that matter the most for React so they don't feel overwhelmed too much by trying to learn all of JS or not knowing where to start dev.to/bradwestfall/javascript-the...

Collapse
 
edgaremmanuel profile image
DevByJESUS

Yes because the probability of the dying of ReactJS over JS is greater than the opposite . So basic Firsts so lower level first after you can learn higher level things like frameworks and others

Collapse
 
pixelagil profile image
Alejandro Vivas

Yes.

Cheers.

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

In sum, YES. React is a framework, not a language. Learn well JS and React will come easily.
FreeCodeCamp has all the JS covered before touching React. ;-) They know what you are doing.

Collapse
 
itays123 profile image
Itay Schechner

Agreed!
I myself had little to no experience with Javascript, and I learned it on the go as I gained experience with React.