When to Start Learning a Front-End Framework

If you try to learn React, Vue, or Angular as a beginner, the first piece of advice you get is to go learn JavaScript - anyone without some JavaScript experience is going to struggle with the added learning curve presented by a framework.

What isn't discussed is how much JavaScript to learn - Do you stop at the basics, or do you need total mastery before you write you finally open your first React tutorial? When are you actually ready to start using a framework?

Concepts you should know

I'm going to level with you: you don't need that much JavaScript to get started with a framework. As long as you have a decent understanding of the building blocks, you're good to go.

This is the list of things you need to have a solid understanding of:

  1. Variables and Functions
  2. Objects and Arrays
  3. Control Flow – if/ else, while, for

If you know all of these, that's all you need to get started on early tutorials - but don't think your JavaScript journey is over yet.

Concepts you should be ready to encounter

Aside from the must know concepts, it pays to have an awareness of broader concepts - These are concepts you won't need to follow the early tutorials, but will need before you'll be able to write full applications.

  2. Scopes (how var, let, and const work; closures)
  3. Object Oriented JavaScript ( class )
  4. Functional JavaScript ( filter, map, reduce)
  5. import/ export
  6. How this works; contexts
  7. async functions, and AJAX.

If you start with frameworks before having an understanding of these concepts, you should expect to need to stop and revisit pieces of this list throughout your learning journey. However, remember that frameworks are an excellent learning space for learning advanced concepts, since they leverage them constantly.

If there is anything on the above list you don't understand yet, you can still start your framework journey - as you understand different parts more, ideas you once struggled can become a lot easier.

Learn to build things

In my opinion, the most important step you should take before you learn a framework is to learn how to build things.

Building things with programming is an acquired skill, and developing the ability to successfully break down tasks so they can be translated into code is a vital skill in any programming language.

The most important part here is that you build very small things - far smaller than you might think, such as "a button that plays your favourite song", "a form that lets the user add and remove fields", or "a box that chases the users mouse around the page". Read this article for help finding ideas.

Building things is harder than you'd think and maintaining motivation is difficult, so you want to choose small, achievable projects that you'll finish. A good test to see if the project is small enough is if you think you can do in under an hour. If it takes longer, no big deal - it's likely not going to take significantly longer.

When you've built a couple of these simple things, then you can introduce a framework. You should keep building simple things with your framework until you're comfortable again before finally moving to more ambitious projects, if you choose - or you can use your new portfolio of projects to land your first job!

Advice for switching

If there's one piece of advice I have for people trying to learn any programming, it's that you will get stuck - All. the. time. This is going to be doubly true once you pick up a framework, since you're going to encounter a lot of unfamiliar concepts all at once.

If you're overwhelmed, the best thing you can do is to focus only on the task at hand. You don't need to spend an hour reading up how class and import work just yet if all you're trying to do is get "Hello World" on the page.

Take things slowly, build on your previous knowledge - it's not a race.

Can't get past JavaScript Tutorials?

Download my FREE ebook on how to succeed as a self-taught JavaScript Developer, and how to find projects that you'll actually finish. Learn More...

Read more