React ES6

Modern JavaScript features for React development

⚡ What is ES6?

ES6 (ECMAScript 2015) brings modern JavaScript features that make React development easier and cleaner. React heavily uses ES6 syntax like arrow functions, classes, destructuring, and modules for building components efficiently. 


// ES6 Arrow Function
const greet = (name) => {
  return `Hello, ${name}!`;
}

console.log(greet('React'));

Output:

Hello, React!

Key ES6 Features for React

➡️

Arrow Functions

Shorter syntax for writing functions 

const add = (a, b) => a + b;
📦

Destructuring

Extract values from objects and arrays 

const {name, age} = person;
🔄

Spread Operator

Expand arrays and objects easily 

const newArr = [...oldArr, 4];
📥

Modules

Import and export components 

import React from 'react';

🔹 Arrow Functions

Arrow functions provide a concise way to write functions in React. They're especially useful for event handlers and callbacks, maintaining the correct 'this' context automatically. 

// Traditional Function
function Welcome(name) {
  return 'Welcome ' + name;
}

// Arrow Function
const Welcome = (name) => {
  return `Welcome ${name}`;
}

// Shorter Arrow Function
const Welcome = (name) => `Welcome ${name}`;

console.log(Welcome('to React'));

Output:

Welcome to React

🔹 Destructuring

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables. This is commonly used in React for props and state management. 

// Object Destructuring
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const {name, age} = person;
console.log(name); // John
console.log(age);  // 30

// Array Destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first);  // red
console.log(second); // green

Output:

John

30

red

green

🔹 Spread Operator

The spread operator (...) expands arrays and objects. In React, it's used for copying state, merging objects, and passing props efficiently without mutating original data. 

// Array Spread
const fruits = ['apple', 'banana'];
const moreFruits = [...fruits, 'orange', 'mango'];
console.log(moreFruits);
// ['apple', 'banana', 'orange', 'mango']

// Object Spread
const user = {name: 'Alice', age: 25};
const updatedUser = {...user, age: 26};
console.log(updatedUser);
// {name: 'Alice', age: 26}

Output:

['apple', 'banana', 'orange', 'mango']

{name: 'Alice', age: 26}

🔹 Template Literals

Template literals use backticks (`) to create strings with embedded expressions. They make string concatenation cleaner and support multi-line strings, perfect for dynamic content in React. 

const name = 'React';
const version = 18;

// Template Literal
const message = `Welcome to ${name} version ${version}!`;
console.log(message);

// Multi-line String
const html = `
  <div>
    <h1>${name}</h1>
    <p>Version: ${version}</p>
  </div>
`;

Output:

Welcome to React version 18!

🔹 Import and Export

ES6 modules let you split code into separate files and import/export components, functions, and variables. React applications are built using this modular approach for better organization. 

// Export (in Button.js)
export const Button = () => {
  return <button>Click Me</button>;
}

export default Button;

// Import (in App.js)
import Button from './Button';
import {Button} from './Button';

// Multiple Imports
import React, {useState, useEffect} from 'react';

🔹 Classes

ES6 classes provide a cleaner syntax for creating objects and inheritance. While React now favors functional components, understanding classes helps with legacy code and object-oriented programming concepts. 

// ES6 Class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

const john = new Person('John', 30);
console.log(john.greet());

Output:

Hi, I'm John

🧠 Test Your Knowledge

Which ES6 feature is used to extract values from objects?