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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036164	إنشاء مكون (Component) مع التكوين (Composition)	6	301383	create-a-component-with-composition

--description--

الآن سوف تنظر في كيفية تكوين مكونات متعددة من React. تخيل أنك تبني تطبيق وأنشأت ثلاث مكونات: Navbar, و Dashboard, و Footer.

لتجميع هذه المكونات معا، يمكنك إنشاء عنصر App تكون مكون الأصل الذي يجعل كل واحد من هذه المكونات الثلاثة أبنائه. لجعل مكون أبن في مكون React، ضف اسم المكون المكتوب كعلامة HTML مخصصة في JSX. على سبيل المثال، في طريقة render يمكنك الكتابة:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

عندما يقرا React علامة HTML مخصصة تشير إلى مكون آخر (اسم مكون مغلف في < /> مثل المثال)، فهو يجعل تكوين ذلك المكون في موقع العلامة. هذا يجب أن يوضح العِلاقة بين الوالد والابن بين عنصر App و Navbar, وDashboard, و Footer.

--instructions--

في محرر التعليمات البرمجية، هناك مكون وظيفي بسيط يسمى ChildComponent ومكون فئة يسمى ParentComponent. تكوين الاثنين معاً بواسطة تقديم ChildComponent ضمن ParentComponent. تيقن من إغلاق علامة ChildComponent مع خط المائل إلى الأمام.

Note: ChildComponent is defined with an ES6 arrow function because this is a very common practice when using React.

--hints--

يجب أن يعيد مكون React عنصر div واحد.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.type() === 'div';
  })()
);

وينبغي للمكون أن ينتج عنصرين متداخلين (two nested elements).

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.children().length === 2;
  })()
);

يجب أن ينتج المكون ChildComponent يكون أبن الثاني.

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

--seed--

--after-user-code--

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

--seed-contents--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }


        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }
        <ChildComponent />
        { /* Change code above this line */ }
      </div>
    );
  }
};