React ES6

React ES6 Prerequisites: Modern JavaScript Essentials

Developing React applications effectively requires mastery of modern ECMAScript 6+ (ES6) JavaScript features. React heavily relies on arrow functions, destructuring, rest/spread operators, array methods, and ES module imports.

Essential ES6 Constructs in React

flowchart TD
    A["ES6 Essentials"] --> B["Arrow Functions"]
    A --> C["Destructuring & Spread"]
    A --> D["Array Methods (map, filter)"]
    A --> E["ES Modules (import/export)"]

Code Example: ES6 Constructs in React

// 1. Arrow Functions & Destructuring in Component Props
export const UserCard = ({ user: { name, email, role = 'Member' }, onSelect }) => {
  return (
    <div className="card" onClick={() => onSelect(name)}>
      <h3>{name}</h3>
      <p>{email}</p>
      <span className="badge">{role}</span>
    </div>
  );
};

// 2. Spread Operator for Immutable State Updates
const initialList = [{ id: 1, text: 'Buy Groceries' }];
const newItem = { id: 2, text: 'Learn React ES6' };

// Create new array copy without mutating initialList
const updatedList = [...initialList, newItem];

// 3. Array.prototype.map for List Rendering
const renderItems = updatedList.map((item) => (
  <li key={item.id}>{item.text}</li>
));

Summary of Core Features

Best Practices & Gotchas

• Avoid Direct Array Mutations: Never use .push(), .splice(), or .sort() directly on React state arrays. Always return new array copies using .map(), .filter(), or [...].
• Always Export Components Explicitly: Use named exports (export const MyComp) or default exports (export default MyComp) consistently across your modular architecture.

Self-Check Challenge

Refactor a standard function(props) { return props.a + props.b; } function into a concise ES6 arrow function with prop destructuring.