How much JavaScript should you know to move on to a framework? I get this question a lot from beginners in the field of web development. This article is just a simple guide on the skills that I recommend learning before jumping into a framework like React, Angular, or Vue. These frameworks are all different, but certain things are used in every single one of them, and if you learn these skills beforehand, you will have much less trouble grasping the concepts of a particular framework.

First of all, every beginner should have the fundamentals of JavaScript before moving to a framework. They include basic syntax variables, arrays, objects, functions, loops, all the other concepts that you would learn when you’re starting to learn the language. With most frameworks, you do not directly touch the DOM. However, I would still recommend learning how to manipulate it if you ever want to build something in pure vanilla JavaScript.
One problem I have seen is that people want to jump right into a framework after learning the fundamentals. I think that is a big mistake because not only are they attempting to learn the concepts of the framework, they are also learning all of ES6 at the same time. Things like classes, arrow functions, destructuring. The problem with this approach is that they will not be able to identify what is part of the framework and what what is JavaScript.

. . .

Modules

Modules are used in every framework because they are used to import files into other files or to import packages. Without modules, there would not be any framework because modules allow everything to work together instead of having isolated code files. There are different types of modules, but you want to focus on ES6, which is the “import-from” syntax. Angular uses TypeScript, which has many of the same features that ES6 has including modules. So if you learn ES6 modules, you will be fine with TypeScript.

Modules are not supported in browsers directly, therefore, you have to use some kind of tooling, like Parcel or Webpack with Babble if you want to be able to compile modules. I am not going to say that you have to learn how to do that before moving to a framework, but I would suggest at least reading about modules a little bit, looking at the syntax, maybe watching a tutorial before you move on to learning a framework.

. . .

Classes

Classes are introduced in ES6. Classes are used in many languages and you may even be familiar with classes from another OOP language. Classes are more commonly used in React and Angular. Vue uses object literal types. I would suggest learning classes, even if you are learning Vue. Learn how to structure them, learn about constructors, methods and properties, instantiation, as well as extending classes and inheritance.

. . .

Arrow functions

Arrow functions will make your code much more compact and clean, even though there are many situations where you will not need to use arrow functions. In my experience, they are the norm when it comes to building applications with these frameworks. It is cleaner, requires fewer lines of code, and there can also be advantages within scope because it uses something called a lexical this, so you want to look more into that.

. . .

Promises

ES6 introduced promises as an alternative to using callbacks for asynchronous code. If we make a request to a server or anything that could take a while, we want to do it asynchronously so that we can move on with our application and not have to stop and wait for a response. This is achieved through the use of promises. In simple terms, they make a promise and then fulfil it when the task is done.

When a promise completes, you want to use .then() to catch the response and get the data back and then .catch() to catch any possible errors. You may also want to look into Async/Await syntax, but I do not think it is necessary to be able to use a framework. You will also need to learn how to use the fetch API to make HTTP requests. There are other tools like Axios that you can use, but it is good to know how to do this with vanilla JavaScript.

. . .

Destructuring

Destructuring is a powerful way unpack values and assign variables from objects and arrays. It makes your code cleaner. Most developers prefer using it in applications built with said frameworks. Keep in mind that destructuring is part of ES6 and is not compatible with every browser. I recommend using Babel, Typescript, or anything that will compile your code into ES5 to ensure full compatibility for every user.

. . .

Components and State

When you first learn basic HTML, CSS, JavaScript, you are taught about separation of concerns. You have your HTML markup, your CSS styling and your JavaScript for any dynamic type functionality. So you select elements from the DOM and manipulate them in a monolithic way. With frameworks, it is a little different in terms of how you think of the mechanics of your application. You want to think of pieces of your user interface as components. View the menu bar, search bar, the main content, whatever it may be, as encapsulated entities that include both the markup and the functionality, and in some cases, the styling.

Each component has its own state, which is usually the data that is associated with it along with the just its state of being. So for example, you might have a menu component that has a state of open and the state of close so that if you click it, maybe it opens up and closes if you click it again. You will have that in your state. That is how you should start thinking in terms of your UI when you’re dealing with frameworks. In a lot of cases, you are going to want to share data or share state. That is when you look into things like Redux in case of React for state level management.

. . .

Spread Operator (…)

This is important, especially when dealing with State. State is usually immutable, which means it can not be directly changed. What usually happens is you have to make a copy of it and add what you want, and then send it down to the application or the component. The spread operator allows us to do that. So here’s a really simple example. So let’s say we have this user state that just has one property of name it is equal to Samuel, and we want to add an age property to this user state.

const userState = {
name: ‘Samuel’
}

What we could do is create a new user state, and we can use the spread operator, which is just three dots and put in user state, and it will give us whatever is original user state. It will make a copy of the original, and then we can add the age property to it like so,

const newUserState = {
…userState,
age: 26
}

. . .

Higher-order array functions

There are a plethora of such functions in JavaScript. Some of the common ones include forEach(), map(), and filter(). A higher-order function is a function that takes another function as a parameter, but these all have to do with arrays, iterating through them and manipulating data. forEach() is probably the most basic. It is used for iteration like a for-loop return. It loops through an array and you can do what you want with the array items.

map() is heavily used in React, and it is used to create an array from another array. You may have an array of user objects and let’s say there is an age property, among others. If you want to create an array of just their ages, you can do that with map(). filter() which will, as the name suggests, filter items out based on a condition. It is mostly used in reducers and state management.

. . .

I think once you get a good grasp of those things, you will be ready to learn any front end framework. You will also be able to pick up a second or third faster. In JavaScript, it is never about how many frameworks you can use. Some developers actually prefer pure vanilla JavaScript. Take your time understanding these concepts. Don’t just gloss over them, practice using them on some side projects. You will get better in no time and you will be ready to jump, headfirst, into a framework of your choice