Skip to main content

Functional Components

In modern React, a component is simply a JavaScript function that returns JSX. Components allow you to split the UI into independent, reusable pieces.

Creating a Component​

A component name must always start with a capital letter. If you start a component with a lowercase letter, React treats it as a standard HTML DOM tag and it will fail to render properly.

// Button.jsx
export default function Button() {
  return (
    <button className="bg-blue-500 text-white rounded px-4 py-2">
      Click Me
    </button>
  );
}

Exporting and Importing​

To use a component inside another file, you must export it. We typically use export default for the main component in a file. If you have multiple small components in one file, you can use named exports.

// App.jsx
import Button from './Button.jsx';

export default function App() {
  return (
    <div>
      <h1>Welcome to the App</h1>
      <Button /> 
    </div>
  );
}

Notice that we render the component using standard self-closing HTML syntax: <Button />.