مكوّنات React

المكوّنات هي اللبنات الأساسية في React. فهي تتيح إنشاء عناصر واجهة مستخدم قابلة لإعادة الاستخدام ومستقلة بذاتها.

ما هو مكوّن React؟

مكوّن React هو دالة أو فئة (class) تُرجع JSX (‏JavaScript XML). وقد يكون بسيطًا كزر، أو معقدًا كنموذج كامل.

أنواع المكوّنات

يوجد نوعان رئيسيان من مكوّنات React:

1. المكوّنات الدالّية (موصى بها):

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

2. مكوّنات الفئات (قديمة):

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

إنشاء أول مكوّن لك

لننشئ مكوّنًا بسيطًا لعرض بطاقة ملف شخصي:

// 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;

لاستخدام هذا المكوّن:

// 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>
  );
}