Functional Components

In modern React, a component is simply a JavaScript function that accepts a `props` object and returns JSX (or `null` if it renders nothing). Function components replaced class components as the preferred style after React 16.8 introduced hooks, because they are shorter, easier to test, and fully capable of managing state and side effects without the complexity of lifecycle methods. Component names must start with a capital letter — React uses this convention to distinguish custom components from built-in HTML elements. A lowercase `

Example

// Minimal functional component
function Hello() {
  return <h1>Hello, World!</h1>;
}

// Arrow function syntax (equally valid)
const Goodbye = () => <p>Goodbye!</p>;

// Component accepting props
function Badge({ label, color = 'blue' }) {
  return (
    <span style={{ background: color, color: '#fff', padding: '2px 8px', borderRadius: 4 }}>
      {label}
    </span>
  );
}

// Composing components
function App() {
  return (
    <div>
      <Hello />
      <p>
        Status: <Badge label="Active" color="green" />{' '}
        Role: <Badge label="Admin" color="purple" />
      </p>
      <Goodbye />
    </div>
  );
}

// A component that renders nothing conditionally
function ConditionalBanner({ show, message }) {
  if (!show) return null;
  return <div className="banner">{message}</div>;
}

export default App;

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned