DEV Community

loading...
Cover image for How much Js you need to use React Js

How much Js you need to use React Js

Sachin Chaurasiya
A passionate developer who love to connect with people to share ideas and knowledge.
Updated on ・3 min read

This post was originally published on https://vision-secrets.com

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 values.in 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;
Enter fullscreen mode Exit fullscreen mode

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(){
//....
}
//to

const myFunction=()=>{
//.....
}
Enter fullscreen mode Exit fullscreen mode

If the function body contains just a single statement, you can omit the brackets and write all on a single line.

const myFunction=()=>doSomething()
Enter fullscreen mode Exit fullscreen mode

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

const myFunction = () => 'test'
myFunction() //'test'
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

you can also create a copy of an array

const array=[...a]
Enter fullscreen mode Exit fullscreen mode

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

const newObj={...oldObj}
Enter fullscreen mode Exit fullscreen mode

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]
[first,second,...others]=numbers
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Conclusion

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.

Discussion (2)

Collapse
pierreatwork profile image
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]
Enter fullscreen mode Exit fullscreen mode

Instead of

const arr1=[1,2,3,4]
const arr1=[...arr1, 5,6,7]
Enter fullscreen mode Exit fullscreen mode

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

Thanks !

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Thank you for letting me know.
Will change it.