Applications in frameworks like React

ECMAScript 6 Modularity and React Componentization

The ECMAScript 6 module system provides natural support for React's component-based development. Through the import and export syntax, component dependencies can be clearly organized. For example, creating a React component file:

// Button.jsx
import React from 'react';

export const Button = ({ children, onClick }) => (
  <button className="primary-btn" onClick={onClick}>
    {children}
  </button>
);

export default Button;

Importing and using it in another file:

// App.jsx
import React from 'react';
import Button, { Button as NamedButton } from './Button';

const App = () => (
  <div>
    <Button onClick={() => console.log('Clicked!')}>Default Export</Button>
    <NamedButton>Named Export</NamedButton>
  </div>
);

Arrow Functions and React Event Handling

The automatic this binding feature of ES6 arrow functions solves the binding issue of event handlers in React:

class Counter extends React.Component {
  state = { count: 0 };

  // Traditional approach requires manual `this` binding
  handleClickTraditional() {
    this.setState({ count: this.state.count + 1 });
  }

  // Arrow function automatically binds `this`
  handleClick = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClickTraditional.bind(this)}>
          Traditional (+1)
        </button>
        <button onClick={this.handleClick}>Arrow Function (+1)</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Destructuring Assignment and React Props Handling

Destructuring assignment greatly simplifies accessing props and state in React:

const UserProfile = ({ user: { name, age, email }, ...restProps }) => (
  <div {...restProps}>
    <h2>{name}</h2>
    <p>Age: {age}</p>
    <p>Email: {email}</p>
  </div>
);

// Using the component
const currentUser = {
  name: 'John Doe',
  age: 28,
  email: 'john@example.com'
};

<UserProfile 
  user={currentUser} 
  className="profile-card" 
  style={{ margin: '20px' }}
/>;

Class Syntax and React Component Definition

ES6 class syntax provides a clearer structure for React class components:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

Template Literals and JSX Integration

Template literals are useful for handling dynamic content in JSX:

const Greeting = ({ name, title }) => (
  <div className="greeting">
    <h2>{`Hello, ${title} ${name}!`}</h2>
    <p>{`Welcome to our platform. Today is ${new Date().toLocaleDateString()}`}</p>
  </div>
);

Promises and Asynchronous Data Fetching

Promises are commonly used in React for handling asynchronous operations like API calls:

class UserList extends React.Component {
  state = {
    users: [],
    loading: true,
    error: null
  };

  componentDidMount() {
    fetch('https://api.example.com/users')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => this.setState({ users: data, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    const { users, loading, error } = this.state;
    
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

Spread Operator and Props Passing

The spread operator simplifies props passing:

const Card = ({ title, children, ...props }) => (
  <div {...props} className={`card ${props.className || ''}`}>
    {title && <h3>{title}</h3>}
    <div className="card-content">{children}</div>
  </div>
);

// Using the component
<Card 
  title="User Profile" 
  style={{ width: '300px' }} 
  className="shadow"
>
  <p>Content goes here</p>
</Card>

Default Parameters and Component Props

ES6 default parameters provide default values for component props:

const Rating = ({ value = 0, max = 5, color = 'gold' }) => (
  <div className="rating">
    {[...Array(max)].map((_, i) => (
      <span 
        key={i} 
        style={{ color: i < value ? color : '#ddd' }}
      >
        ★
      </span>
    ))}
  </div>
);

// Using without passing certain props
<Rating value={3} />  // Displays 3 gold stars (out of 5)
<Rating value={4} max={10} color="red" />  // Displays 4 red stars (out of 10)

Generator Functions and React State Management

Generator functions can be used to create complex state logic:

function* counterGenerator() {
  let count = 0;
  while (true) {
    const reset = yield count;
    count = reset !== undefined ? reset : count + 1;
  }
}

class CounterApp extends React.Component {
  counter = counterGenerator();
  state = { count: this.counter.next().value };

  handleIncrement = () => {
    this.setState({ count: this.counter.next().value });
  };

  handleReset = () => {
    this.setState({ count: this.counter.next(0).value });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
        <button onClick={this.handleReset}>Reset</button>
      </div>
    );
  }
}

Symbol and React Component Key Property

Symbol can be used to generate unique key values:

const ITEMS = [
  { id: Symbol(), name: 'Item 1' },
  { id: Symbol(), name: 'Item 2' },
  { id: Symbol(), name: 'Item 3' }
];

const ItemList = () => (
  <ul>
    {ITEMS.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

Map/Set and React State Management

Map and Set data structures are suitable for managing complex state:

class ShoppingCart extends React.Component {
  state = {
    items: new Map()
  };

  addItem = product => {
    this.setState(prevState => {
      const newItems = new Map(prevState.items);
      const quantity = newItems.get(product.id) || 0;
      newItems.set(product.id, quantity + 1);
      return { items: newItems };
    });
  };

  removeItem = productId => {
    this.setState(prevState => {
      const newItems = new Map(prevState.items);
      newItems.delete(productId);
      return { items: newItems };
    });
  };

  render() {
    const totalItems = [...this.state.items.values()].reduce((a, b) => a + b, 0);
    
    return (
      <div>
        <p>Total Items: {totalItems}</p>
        {/* Render shopping cart content */}
      </div>
    );
  }
}

Proxy and React State Interception

Proxy can be used to create reactive state:

function createReactiveState(initialState, setStateCallback) {
  return new Proxy(initialState, {
    set(target, property, value) {
      target[property] = value;
      setStateCallback({ ...target });
      return true;
    }
  });
}

class ReactiveComponent extends React.Component {
  state = { count: 0, text: '' };
  
  componentDidMount() {
    this.reactiveState = createReactiveState(
      this.state,
      newState => this.setState(newState)
    );
  }

  handleClick = () => {
    // Direct modification triggers state update
    this.reactiveState.count += 1;
  };

  handleChange = e => {
    this.reactiveState.text = e.target.value;
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Count: {this.state.count}</button>
        <input 
          type="text" 
          value={this.state.text} 
          onChange={this.handleChange} 
        />
      </div>
    );
  }
}

Decorators and Higher-Order Components

Although decorators are not yet an ES6 standard, they are commonly used in React to create higher-order components:

// A simple higher-order component
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} will unmount`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// Using decorator syntax
@withLogger
class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

// Or regular invocation
const MyComponentWithLogger = withLogger(MyComponent);

Tail Call Optimization and Recursive Components

Although uncommon in React, ES6's tail call optimization can be used for recursive components:

const RecursiveTree = ({ nodes, depth = 0 }) => (
  <ul style={{ marginLeft: `${depth * 20}px` }}>
    {nodes.map(node => (
      <li key={node.id}>
        {node.name}
        {node.children && (
          <RecursiveTree nodes={node.children} depth={depth + 1} />
        )}
      </li>
    ))}
  </ul>
);

// Using the component
const treeData = [
  {
    id: 1,
    name: 'Parent',
    children: [
      {
        id: 2,
        name: 'Child 1',
        children: [
          { id: 3, name: 'Grandchild 1' },
          { id: 4, name: 'Grandchild 2' }
        ]
      },
      { id: 5, name: 'Child 2' }
    ]
  }
];

<RecursiveTree nodes={treeData} />;