How Much JavaScript You Need To Know To Start With ReactJs

What is ReactJs and why it is so popular?

Sachin Chaurasiya ・ Nov 3 '20

#javascript #react #webdev

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.

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.

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.

const myFunction=()=>doSomething()

Arrow functions allow you to have an implicit return: values are returned without having to use the return keyword.

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.

const arr1=[1,2,3,4]
const arr2=[...arr1, 5,6,7]

you can also create a copy of an array

const array=[...a]

This works for Objects as well, Clone an Object with:

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.

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.

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

7. Promises

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

More about promises

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

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 | Twitter

Comments

[Pierre]

Great article !

Not sure but i think you made a tiny mistake :

const arr1=[1,2,3,4]
const arr1=[...arra1, 5,6,7]

Instead of

const arr1=[1,2,3,4]
const arr1=[...arr1, 5,6,7]

If it's not a mistake, i'd like some info on why it's arra1 :)

Thanks !

[Sachin Chaurasiya]

Thank you for letting me know.
Will change it.