freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/react/compose-react-components.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036166	إنشاء مكونات React	6	301381	compose-react-components

--description--

ومع استمرار التحديات في استخدام تركيبات أكثر تعقيدا مع مكونات React و JSX، ثمة نقطة هامة جديرة يحب ملاحظتها. لا يختلف تقديم مكونات أسلوب ES6 ضمن مكونات أخرى عن تقديم المكونات البسيطة التي استخدمتها في التحديات القليلة الأخيرة. يمكنك أنشاء عناصر JSX، والمكونان الوظيفي عديمة الحالة (stateless functional components)، ومكونات الفئة (class components) في ES6 ضمن مكونات أخرى.

--instructions--

في محرر التعليمات البرمجية، يقوم مكون TypesOfFood فعلًا بتقديم مكون يسمى Vegetables. وهناك مكون Fruits من التحدي الأخير.

أدخل مكونين داخل Fruits - أولا NonCitrus، ثم Citrus. كل من هذين العنصرين تم توفيره لك خلف الكواليس. بعد ذلك، عش مكون فئة Fruits في مكون TypesOfFood، تحت عنصر العنوان h1 وما فوق Vegetables. وينبغي أن تكون النتيجة سلسلة من المكونات المتداخلة التي تستخدم نوعين مختلفين من المكونات.

--hints--

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

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
    return mockedComponent.children().type() === 'div';
  })()
);

يجب أن ينتج مكون TypesOfFood مكون Fruits.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
    return mockedComponent.children().childAt(1).name() === 'Fruits';
  })()
);

مكون Fruits يجب أن يعيد مكون NonCitrus و مكون Citrus.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
    return (
      mockedComponent.find('Fruits').children().find('NonCitrus').length ===
        1 &&
      mockedComponent.find('Fruits').children().find('Citrus').length === 1
    );
  })()
);

يجب أن ينتج مكون TypesOfFood مكون Vegetables تحت مكون Fruits.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
    return mockedComponent.children().childAt(2).name() === 'Vegetables';
  })()
);

--seed--

--before-user-code--

class NonCitrus extends React.Component {
  render() {
    return (
      <div>
        <h4>Non-Citrus:</h4>
        <ul>
          <li>Apples</li>
          <li>Blueberries</li>
          <li>Strawberries</li>
          <li>Bananas</li>
        </ul>
      </div>
    );
  }
};
class Citrus extends React.Component {
  render() {
    return (
      <div>
        <h4>Citrus:</h4>
        <ul>
          <li>Lemon</li>
          <li>Lime</li>
          <li>Orange</li>
          <li>Grapefruit</li>
        </ul>
      </div>
    );
  }
};
class Vegetables extends React.Component {
  render() {
    return (
      <div>
        <h2>Vegetables:</h2>
        <ul>
          <li>Brussel Sprouts</li>
          <li>Broccoli</li>
          <li>Squash</li>
        </ul>
      </div>
    );
     }
};

--after-user-code--

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

--seed-contents--

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* Change code below this line */ }

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

class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* Change code below this line */ }

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

--solutions--

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* Change code below this line */ }
        <NonCitrus />
        <Citrus />
        { /* Change code above this line */ }
      </div>
    )
  }
}

class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
    render() {
      return (
        <div>
        <h1>Types of Food:</h1>
          { /* Change code below this line */ }
          <Fruits />
          { /* Change code above this line */ }
          <Vegetables />
        </div>
      );
    }
};