React Components

Components are the fundamental building blocks of React. They let you create reusable, self-contained user interface elements.

What Is a React Component?

A React component is a function or a class that returns JSX (JavaScript XML). It can be as simple as a button or as complex as a complete form.

Types of Components

There are two main types of React components:

1. Function components (recommended):

function Welcome(props) {
  return <h1>Bonjour, {props.name}</h1>;
}

2. Class components (legacy):

class Welcome extends React.Component {
  render() {
    return <h1>Bonjour, {this.props.name}</h1>;
  }
}

Creating Your First Component

Let's create a simple component to display a profile card:

// ProfileCard.js
function ProfileCard({ name, role, avatar }) {
  return (
    <div className="profile-card">
      <img src={avatar} alt={name} className="avatar" />
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

export default ProfileCard;

To use this component:

// App.js
import ProfileCard from './ProfileCard';

function App() {
  return (
    <div className="app">
      <ProfileCard
        name="Marie Dupont"
        role="Développeuse Frontend"
        avatar="/images/avatar.jpg"
      />
    </div>
  );
}