freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateful-component.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036170	إنشاء مكون Stateful	6	301391	create-a-stateful-component

--description--

واحد من أهم المواضيع في React هو state. الحالة (State) تتكون من أي بيانات يحتاج التطبيق الخاص بك إلى معرفتها، التي يمكن أن تتغير بمرور الوقت. تريد من تطبيقاتك أن تستجيب لتغييرات الحالة وأن تقدم واجهة المستخدم (UI) المحدثة عند الضرورة. يوفر React حلاً جيداً لإدارة الدولة لتطبيقات الويب الحديثة.

يمكنك إنشاء الحالة (state) في مكون React عن طريق الإعلان عن state خاصية في فئة المكون في constructor الخاص به. هذا يهيئ المكون state عند إنشائه. يجب تعيين خاصية state إلى object من JavaScript. تكونها يبدو كهذا:

this.state = {

}

لديك حق الوصول إلى كائن state طوال عمر المكون الخاص بك. يمكنك تحديثه، توفيره في واجهة المستخدم الخاصة بك، وتمريره مثل props لمكونات ألابن. يمكن أن يكون الكائن state معقداً أو بسيطاً بقدر ما تحتاج. لاحظ أنه يجب عليك إنشاء عنصر فئة بواسطة تمديد React.Component لإنشاء state مثلما ذكر.

--instructions--

هناك مكون في محرر التعليمات البرمجية يحاول تقديم خاصية firstName من state. ومع ذلك، لا يوجد state معرفة. قم بتهيئة المكون يحتوي state في constructor وقم بتعيين اسمك إلى خاصية firstName.

--hints--

StatefulComponent يجب أن يكون موجودا ويقدم.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return mockedComponent.find('StatefulComponent').length === 1;
  })()
);

StatefulComponent يجب أن يقدم عناصر div و h1.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return (
      mockedComponent.find('div').length === 1 &&
      mockedComponent.find('h1').length === 1
    );
  })()
);

يجب تهيئة حالة (state) بقيمة StatefulComponent باستخدام خاصية firstName إلى string.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return (
      typeof initialState === 'object' && typeof initialState.firstName === 'string'
    );
  })()
);

الخاصية firstName في حالة StatefulComponent يجب أن تكون في عنصر h1.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return mockedComponent.find('h1').text() === initialState.firstName;
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<StatefulComponent />, document.getElementById('root'))

--seed-contents--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    // Only change code below this line

    // Only change code above this line
  }
  render() {
    return (
      <div>
        <h1>{this.state.firstName}</h1>
      </div>
    );
  }
};

--solutions--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: 'freeCodeCamp!'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.firstName}</h1>
      </div>
    );
  }
};