How much Js you need to use React Js?

javascript and react vision secrets

Table of Contents

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

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

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 which stores the javascript there no type specified for the variable. as you assigned the value to the variable it becomes that type of variable.

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 function keyword.

const myFunction=function(){

const myFunction=()=>{

If the function body contains just a single statement, you can omit the brackets and write 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 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]

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 to read 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.


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

Comment Down If you have any queries.

if you like my post then Buy me a coffee.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top