frontend-framework-guide

Frontend Framework Guide

Patterns and best practices for building production applications with modern frameworks, primarily React.

React is the dominant frontend framework for building scalable applications. Mastering React's mental model—component composition, hooks, state management, and performance optimization—is essential for professional development.

---

Core Concept: Components & Composition

The React Mental Model

React is built on declarative component composition:

State → Component → UI

User interaction → State change → Re-render → New UI

Declarative: Describe what UI should look like, React handles updates. Imperative: Manually update DOM (old way, error-prone).

Functional Components (Modern)

function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

// Use it
<Button label="Click me" onClick={() => console.log('clicked')} />

Functional components are the standard now. Class components are legacy.

---

Hooks: The Foundation

useState: Managing Component State

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // count: current state value
  // setCount: function to update state

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Key points:

• useState returns [value, setter]
• Setter triggers re-render
• Initial value can be a function (useful for expensive calculations)

useEffect: Side Effects

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Run after render
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []); // Dependency array: run once on mount

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}