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

id, title, challengeType, isRequired, videoUrl, localeTitle

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036170	Create a Stateful Component	6	false		إنشاء مكون Stateful

Description

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

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

Instructions

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

Tests

tests:
  - text: يجب أن توجد <code>StatefulComponent</code> ثم تقديم.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "<code>StatefulComponent</code> should exist and render.");'
  - text: يجب أن يقدم <code>StatefulComponent</code> <code>div</code> و عنصر <code>h1</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.");'

Challenge Seed

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    // initialize state here

  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required