---
title: React - Components
localeTitle: رد الفعل - مكونات
---
## رد الفعل - مكونات
مكونات قابلة لإعادة الاستخدام في react.js. يمكنك ضخ القيمة في الدعائم كما هو موضح أدناه:
`function Welcome(props) {
return
Hello, {props.name}
;
}
const element = ;
ReactDOM.render(
element,
document.getElementById('root')
);
`
`name="Faisal Arkan"` سيعطي قيمة في `{props.name}` من `function Welcome(props)` `{props.name}` المكونة التي أعطيت القيمة `name="Faisal Arkan"` ، بعد أن تتفاعل ستجعل العنصر في html.
### طرق أخرى لإعلان المكونات
هناك العديد من الطرق لاعلان المكونات عند استخدام React.js، ولكن هناك نوعان من المكونات، ومكونات **_عديمي الجنسية_** ومكونات **_جليل._**
### جليل
#### مكونات نوع الطبقة
`class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
{this.props.name}
{this.props.color}
);
}
}
`
### مكونات عديمة الحالة
#### مكونات وظيفية (وظيفة السهم من ES6)
`const Cat = props => {
return (
{props.name}
{props.color}
;
);
};
`
#### مكونات العودة الضمنية
`const Cat = props =>
{props.name}
{props.color}
;
`