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:
- variables
- Arrow function
- Object and arrays using Rest and Spread Operator
- Object and array Destructuring
- Template literals
- Classes
- Promises
- Async/Await
- 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.
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.
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.
Top comments (2)
Great article !
Not sure but i think you made a tiny mistake :
Instead of
If it's not a mistake, i'd like some info on why it's arra1 :)
Thanks !
Thank you for letting me know.
Will change it.