Before jumping into any JavaScript framework.

In this article, I'm going to talk about the core concepts that you should learn before jumping into any JavaScript framework. I'm going to stick with the top three which are React, Angular, and Vue. 

I haven't touched Vue but I have hands-on experience with React and Angular. Please let me know if there is something that I mentioned incorrectly or the things that I haven't mentioned here. 

I think if you have learned these before it could help you out with grasping the framework and also you will be able to switch to any framework easily because you already know these core JavaScript concepts. If you miss these concepts it will be very difficult to understand separately which are the concepts belongs to JavaScript and it's frameworks.

This article will be not describing all the information about the concepts but you can search through the internet to find more tutorials and documentation to enhance your skills.

JavaScript Fundamentals

•    Basic Syntax
•    Variables
•    Arrays and Object Literals
•    Events
•    Functions, loops, conditionals
•    DOM (Document Object Model)

The thing is people want to jump into a framework just after learning these fundamentals. Then they are learning the framework and ES6 features (classes, arrow functions, destructuring, etc.. ) at the same time. I also chose that path and that's why I'm writing this article.

Modules

Modules are used in many frameworks because these used to import files into other files. Without modules, there wouldn't be any frameworks because modules allowed everything to be brought together instead of having isolated code and files.

•    Modules -
•    ES6 Module - which is an import from syntax,
•    TypeScript (Angular) - has many of the ES6 features
•    Tooling - Modules are not supported in browsers to compile themselves directly. So it needed some kind of tooling like Parcel, Webpack & Babel.
•    Export & Export Default

Classes

React and Angular use classes but as I know Vue uses object literal types. You should have to consider,

•    Structuring a class
•    Constructors
•    Methods & properties
•    Instantiation - creating objects from a class
•    Extending classes and inheritance

Arrow Functions

Arrow functions are much more compact and give advantages when it comes to scope in certain situations. It is norm using arrow-functions in these frameworks.

It makes,

•    Cleaner and less code
•    Standard writing in modern JS
•    Scope and "lexical this"

Promises / Asynchronous Requests

ES6 Promises is an alternative to using callbacks for asynchronous code. They make promises and fulfill them when the task is done. I suggest my friend's post about the asynchronous and synchronous call in node.js to read understand those things.

I recommend,

•    Learn how to create and receive promises
•    Standard .then and .catch syntax
•    Async/Await
•    Learn the Fetch API for making HTTP requests
•    Axios

Destructuring

Destructuring allows you to unpack values from objects and arrays. It makes the code cleaner. Please follow this link to have a better understanding. I think that the link is enough for understanding.

Components and State

When we use HTML, CSS, and JS we think about the "separation of concern". In these, we think like pieces of your UI (search box, menu, etc..) as components. These are the markup and its functionalities (some cases styling).

•    Each component has its state which is the data that is associated with it and along with the state of being.
•    Application-level state( Using Redux, Vuex, etc..) - There is a "Single Source of Truth" that shares data.
•    Nested Components (Parent & Children)
•    Can be directly inserted or used in a router

Spread Operator (...)

The state is usually immutable. But we can make a copy and edit. Then we can send it down to the component. Spread Operator allows us to do that. I hope this link will give you a better understanding. 

High Order Array Functions

I hope you know these functions if you have already learned any functional programming before.

•    forEach()
•    map()
•    filter()

That's it and I suggest you learn these BEFORE jumping into any JavaScript framework. It will make yourself easier to learn or understand any framework and it will be very easy to move on to another framework also. 

I also suggest you will search these on the internet and also follow my links to understand or revise these for yourself. If you want to add something to this or if you wanna say something that you don't agree with please share your knowledge on the comment section. Special thanks to my friends who helped me with this article. I hope you got something from this. All the Best! 👍✨