JavaScript ES6 brings new syntax and some new features that can make our code in React more modern and more readable. Here are some ES6 features and how they can be used in React.
1. Import / Export: ES6 provides a way to import and export modules in JavaScript. In React, instead of using `require`, we can use `import` and `export`.
```
// Import:
import React from ‘react’;
import Component from ‘./Component’;
// Export:
export default Component;
```
1. Arrow Functions: Arrow functions provide a cleaner syntax for defining functions and they also solve the problem of the context of `this`.
```
class Component extends React.Component {
handleClick = () => {
console.log(this); // ‘this’ refers to the instance of the Component.
}
render() {
return ;
}
}
```
1. Classes: React components can now be declared as classes. An ES6 class component can be created like this –
```
class MyComponent extends React.Component {
render() {
return (
1. Destructuring: ES6 introduced destructuring, which is a way to unpack values from arrays, or properties from objects, into distinct variables.
```
render() {
const { title, author } = this.props;
return (
1. Template Literals: Template literals provide a new way to handle strings. This allows for variable interpolation as well as multiline strings.
```
const name = ‘John’;
console.log(`Hello, ${name}!`);
```
1. Spread / Rest Operators: The spread operator helps to split up array and objects properties.
```
let oldArray = [1,2,3];
let newArray = […oldArray, 4,5]; // [1,2,3,4,5]
```
For React, this operator is often used to pass down props from parent to child components.
```
```
1. Default Parameters: ES6 introduced default parameters in functions. They get used if nothing or undefined gets passed on to them.
```
function(name = ‘Stranger’) {
return ‘Hello ‘ + name;
}
```
ES6 features are fully supported in modern browsers or with the help of Babel transpiler. For older browsers, some polyfills might be necessary.
