React ES6

React ES6: Essential JavaScript Features for React Code

React components are plain JavaScript functions, so writing clean React depends on modern ES6 syntax. Features like arrow functions, object destructuring, array .map(), and spread operators appear in almost every component file. Learning these six patterns makes JSX and hooks immediately readable.

Arrow Functions and Array Methods

Arrow functions give you concise callbacks for event handlers and list rendering. Unlike traditional loops, Array.prototype.map() returns a brand-new array of JSX elements without mutating your source data.

const tasks = [
  { id: 1, label: 'Write tests', done: true },
  { id: 2, label: 'Ship release', done: false },
];

const openTasks = tasks.filter((task) => !task.done);
const labels = openTasks.map((task) => task.label);

Destructuring and the Spread Operator

Destructuring extracts properties from props or hook return values in a single line. The spread operator (...) copies arrays and objects safely so you never mutate React state in place.

function ProfileCard({ username, role, ...rest }) {
  const baseUser = { username, role };
  const updatedUser = { ...baseUser, active: true };

  return (
    <section {...rest}>
      <h2>{updatedUser.username}</h2>
      <p>Role: {updatedUser.role}</p>
    </section>
  );
}

ES Modules and Ternary Expressions

React apps split code across files using export and import. Inside JSX, you cannot write if statements directly, so ternary operators (condition ? a : b) handle inline conditional output cleanly.

export const API_URL = 'https://api.example.com/v1';
export default function formatPrice(cents) {
  return cents > 0 ? `$${(cents / 100).toFixed(2)}` : 'Free';
}

Common ES6 Mistakes in React

• Forgetting Braces Around Named Imports: Writing import useState from 'react' fails because useState is a named export. Use import { useState } from 'react'.
• Using var Instead of const: var leaks outside block scopes and causes stale values inside closures. Default to const, and use let only when reassigning.

Frequently Asked Questions

Do I need ES6 classes to write React components?

No. Modern React uses function components and hooks almost exclusively, though understanding class syntax helps when reading legacy codebases or Error Boundaries.

Why does React prefer .map() over forEach()?

forEach() returns undefined, so JSX receives nothing to render. .map() returns an array of React elements that React renders into the DOM.

What is the difference between default and named exports?

A file can have only one export default, which you import with any local name. A file can have many named exports, which must be imported inside curly braces.