freeCodeCamp/guide/arabic/react/component/index.md

1.7 KiB

title localeTitle
React - Components رد الفعل - مكونات

رد الفعل - مكونات

مكونات قابلة لإعادة الاستخدام في 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 ( <div> <h1>{props.name}</h1> <p>{props.color}</p> </div>; ); };

مكونات العودة الضمنية

`const Cat = props =>

{props.name}

{props.color}

; `