Do this before any JS frameworks ✔
Tags: javascript, html, react, beginners
Published: 2020-04-07 16:11:48

## Hello _newbies_ 🐝

I think you are well aware of these three **giant JS frameworks** right below :

![javascript framework](https://res.cloudinary.com/techlead/image/upload/v1586269594/Dev.to%20posts/czlawdrraw7geempn6vg.png)

Learning such frameworks is very important for you if you want to make an entry to web developer industry.

But _hold on_ 🙆‍♂️,  before touching such frameworks one should know the **ins and out** of vanilla javascript.

Yes, you have to well trained in vanilla javascript before moving towards to any frameworks.

### But, exactly what will be the minimum requirement of javascript for me ?
> Well there are some JS concepts 📕 which are required to work on this frameworks. 

Thats why I have come up to this post to save your work to finding those concepts and guide you'll through this prerequisites for any JS frameworks.

_**So here we go then...**_

<hr>

![Html Css Javascript](https://res.cloudinary.com/techlead/image/upload/v1586271286/Dev.to%20posts/gagrm9g0is8eckptifvb.png)

When we speak about web 🕸 _HTML, CSS and Javascript_ will be always there.

Learn some basic symentic HTML tags along with basic CSS / CSS3 styling.

In **Javacript** , basics that you should get familiar with are :

- Syntax
- Variables
- Arrays / Objects
- Events
- Functions
- Loops
- Conditionals

<hr>

To seal the deal with Javascript one should not only basics of it but also some advanced **Javascript features / concepts** too.
This will get complicated though but hey don't worry _**you got this**_ 👏

<hr>

Advanced Javascript features :

> ### **Array methods** ⚡
> - forEach
> - map
> - filter
> - reduce
> - etc...

This tutorial by [Florin Pop](https://dev.to/florinpop17) on [youtube](https://www.youtube.com/playlist?list=PLgBH1CvjOA62PBFIDq55-S6Beivje30A2) is great to start.

<br>

<hr>

> Next up is **Arrow Functions** 🏹 along with ``` 'this' ``` keyword.

```javascript
hello = () => {
  return "Hello World!";
}

```

Read more about _arrow function_ [here](https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/) and 
about 'this' keyword [here](https://www.w3schools.com/js/js_this.asp)

<br>

> Some about **ES6 modules** using import / export [here](https://www.sitepoint.com/understanding-es6-modules/)

<hr>

> ### **Promises** 🤝
> Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.
>  - Async / Await
> - Fetch API

Documentation [here](https://javascript.info/async)

<hr>

> ### **Destructuring** 🧹
> Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables .

```javascript
const user = {
    name: "Jayesh",
    age: 21
}

const {name, age} = user;
```

Documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

<hr>

> ### **Spread Operator** 🌟
> Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

```javascript
const state = {
    name: "Jayesh"
}

const newState = {
    ...state,
    age: 30
}
```

Documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

<hr>

> ### Javascript Classes 🛄
> ES6, also known as ECMAScript2015, introduced classes. 
> 
> A **class** is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

> - Structure
> - Constructors
> - Methods / Properties
> - Instantiation
> - Extending 

Documentation [here](https://www.w3schools.com/js/js_classes.asp)

<hr>

# **React essentials**

> ### **Components**

![react component](https://res.cloudinary.com/techlead/image/upload/v1586274312/Dev.to%20posts/mtsx8z52ei69cqmuvar6.jpg)

> Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, **Class components** and **Function components** .
> The user interface is broken up into individual components.
> - Navbar
> - Menu
> - Main

<hr>

## Miscellaneous 🎊
> - Typescript (Angular)
> - Webpack & Babel
> - DOM Manipulation (optional)

<hr>

## More tutorials for you 🤗
* Basic [Javascript](https://youtu.be/PkZNo7MFNFg)
* React Crash [Course](https://youtu.be/DLX62G4lc44)
* Typescript Crash [Course](https://youtu.be/BwuLxPH8IDs)

<hr>



Thank you _devs_ for hanging along I hope this guide will really help out you'll.

Good luck _**Devs**_ ❤ 

**Stay Home, Stay Safe** 🏡



Also do check my previous posts 
* [Center things in CSS 🎯](https://dev.to/mindset/how-to-center-things-in-css-2obo)
* [Top Developer Mindset 👨‍💻](https://dev.to/mindset/post-1-4kb0)


**Author:**

Instagram ➡ [_Jayesh.2112 💝_](https://www.instagram.com/jayesh.2112)

Twitter ➡  [_Developer_Codes 💙_](https://www.twitter.com/Developer_Codes)