React components explained: functions vs classes

Two Ways to Write Components

React supports two component styles. Functional components are the modern standard. Class components are legacy — you'll encounter them in older codebases, but write new code as functions.

Functional Component

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

// Arrow function syntax — same thing
const UserCard = ({ name, role }) => (
  <div>
    <h2>{name}</h2>
    <p>{role}</p>
  </div>
);

Class Component (Legacy)

import { Component } from 'react';

class UserCard extends Component {
  render() {
    const { name, role } = this.props;
    return (
      <div>
        <h2>{name}</h2>
        <p>{role}</p>
      </div>
    );
  }
}

Rules

Component names must start with a capital letter — UserCard not userCard. React uses this to distinguish components from plain HTML tags. Lowercase names are treated as HTML elements.

Compose complex UIs by nesting components:

function App() {
  return (
    <div>
      <UserCard name="Arjun" role="Engineer" />
      <UserCard name="Priya" role="Designer" />
    </div>
  );
}

Functional components support hooks, are easier to test, and produce less boilerplate. Use them exclusively for new code.