React ES6

🚀 React ES6

ES6 introduced powerful JavaScript features that make React code cleaner and easier to write. Most React code today is written using ES6.

🔥 Key ES6 Features Used in React

ES6 Feature Why It’s Important in React
let and const For better variable control
Arrow Functions Short syntax, auto-bind this
Classes Used in older React class components
Template Literals For dynamic strings
Destructuring Easy access to props and state
Spread/Rest Operator For merging and copying values
Modules (import/export) Used to import/export components

1️⃣ let and const

Use const for values that won’t change, and let when they may change.

const name = "React";
let year = 2025;

2️⃣ Arrow Functions

Used a lot in React for components and event handlers.

Example:

const App = () => {
return <h1>Hello React!</h1>;
};

Event handler example:

<button onClick={() => alert("Clicked!")}>Click Me</button>

3️⃣ Classes (Used in older React)

Before hooks, many components were created using class.

class App extends React.Component {
render() {
return <h1>Hello from Class Component</h1>;
}
}

Now replaced with:

const App = () => <h1>Hello from Functional Component</h1>;

4️⃣ Template Literals

Useful for dynamic text:

const name = "Vipul";
return <h2>{Welcome, ${name}!}</h2>;

5️⃣ Destructuring

Very common with props and state.

Without destructuring:

function User(props) {
return <p>{props.name}</p>;
}

With destructuring:

function User({ name }) {
return <p>{name}</p>;
}

6️⃣ Spread Operator (...)

Used for copying or merging objects/arrays — useful in state updates.

Example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

Updating state example:

setUser({ ...user, age: 25 });

7️⃣ Modules (import & export)

React splits code into components. ES6 modules make this possible.

Export:

export default App;

Import:

import App from "./App";

Named exports:

export const user = "Vipul";

Import named:

import { user } from "./data";

📌 Summary Table

Feature Example Use in React
Arrow Function const App = () => <h1>Hello</h1>
Destructuring const { title } = props
Spread Operator setState({ ...state, count: count + 1 })
Modules import Component from "./Component"

🎉 You’re Now Ready for Modern React!

Understanding ES6 makes React much easier to read and write.

You may also like...