How Much JavaScript You Need To Know To Start With ReactJs
Tags: javascript, react, webdev
Published: 2020-11-04 08:32:17

{%post https://dev.to/sachinchaurasiya/what-is-reactjs-and-why-it-is-so-popular-5ha5 %}

If you are planning to learn to react then you must know the most recent JavaScript features that you will use over and over in React.

There is no need to be an expert in these topics right away, but as you more deep dive into React, the more you will need to master these.

## List of topics:
1. variables
2. Arrow function
3. Object and arrays using Rest and Spread Operator
4. Object and array Destructuring
5. Template literals
6. Classes
7. Promises
8. Async/Await
9. ES Modules

## 1. Variables

Variables are nothing but a container that stores the values in *JavaScript* there is no type specified for the variable, as you assigned the value to the variable it infers the type from the assigned value.

in Javascript, we can define a variable using `var`, `let` and `const`.

```javascript
var a=0;
let b=1;
const NUM=10;
```
## 2. Arrow Function
 
Arrow Functions are one of the most Impactful features in javascript.
it is the most welcoming change. now you rarely see the usage of the `function` keyword.

```javascript
const myFunction=function(){
//....
}
//to

const myFunction=()=>{
//.....
}
```
If the function body contains just a single statement, you can omit the brackets and write them all on a single line.

```javascript
const myFunction=()=>doSomething()
```
Arrow functions allow you to have an implicit return: values are returned without having to use the `return` keyword.

```javascript
const myFunction = () => 'test'
myFunction() //'test'
```
### How `this` works in arrow functions
 
`this` is a concept that can be complicated to grasp, as it varies a lot depending on the context and also varies depending on the mode of JavaScript (strict mode or not).

It's important to clarify this concept because arrow functions behave very differently compared to regular functions.

## 3. Object and arrays using Rest and Spread Operator

In JavaScript, there are two modern techniques to work with arrays and objects.

- Spread Operator
- Rest Operator

Let say you want to create an array using another array.

```javascript
const arr1=[1,2,3,4]
const arr2=[...arr1, 5,6,7]
```
you can also create a copy of an array

```javascript
const array=[...a]
```
This works for Objects as well, Clone an Object with:

```javascript
const newObj={...oldObj}
```
This is very useful when you are working with `state` in React Js where you need to update the object so, that time you first clone the object then update the certain part and then finally merge to the original object.

the `rest` is useful when working with array destructuring.

```javascript
const numbers=[1,2,3,4,5]
[first,second,...others]=numbers
```
this is useful when you pass `props` to `child component` in React Js.
you use the `rest operator` to destructure the props.

## 4. Object and array Destructuring

 Learn how to use the destructuring syntax to work with arrays and objects in JavaScript.

```javascript
const person = {
firstName: 'Sachin',
lastName: 'Chaurasiya',
actor: False,
age: 20 
}
const { firstName: name, age } = person //name: Sachin, age: 20
```

## 5. Template literals
 
Template literals are my personal favourite because it gives us the functionality to create complex strings.
for template literals, we use **``**. 

this is very useful when you are working with `styled components` to style your react components.

## 6. Classes

In the world of OOPS classes and objects are the concepts you must know.
this is not the tutorial on OOPS so I recommend reading [MDN Docs on Class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

## 7. Promises
 Promises are one way to deal with asynchronous code in JavaScript, without writing too many callbacks in your code.

[More about promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

## 8. Async/Await

 Discover the modern approach to asynchronous functions in JavaScript.
JavaScript evolved in a very short time from callbacks to Promises, and since ES2017 asynchronous JavaScript is even simpler with the `async/await` syntax.

[More About Async/Await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)

## 9. ES Modules

To work with modularity ES Module Concepts is a must. in react you work with this concept frequently.

## Conclusion

These are the Recent Javascript Features You need to learn to start with React Js. You did not need to be an expert in these concepts but at least aware of these.

And that’s it for this topic. Thank you for reading.

### Connect with me
[LinkedIn](https://www.linkedin.com/in/sachin-chaurasiya) | [Twitter](https://twitter.com/sachindotcom)

<a href="https://www.buymeacoffee.com/sachin87" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>