freeCodeCamp/curriculum/challenges/german/03-front-end-development-libraries/react/use-react-to-render-nested-components.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036165	Verwende React, um verschachtelte Komponenten zu rendern	6	301420	use-react-to-render-nested-components

--description--

Die letzte Aufgabe zeigte einen einfachen Weg, zwei Komponenten zusammenzufügen, aber es gibt viele verschiedene Möglichkeiten, wie du Komponenten mit React zusammensetzen kannst.

Die Komponentenkomposition ist eine der mächtigen Funktionen von React. Wenn du mit React arbeitest, ist es wichtig, dass du dir deine Benutzeroberfläche in Form von Komponenten vorstellst, wie im App-Beispiel in der letzten Aufgabe. Du zerlegst deine Benutzeroberfläche in ihre Grundbausteine, und diese Teile werden zu den Komponenten. Dies hilft dabei, den Code, der für die Benutzeroberfläche verantwortlich ist, von dem Code zu trennen, der für die Anwendungslogik zuständig ist. Das kann die Entwicklung und Pflege komplexer Projekte erheblich vereinfachen.

--instructions--

Im Code-Editor sind zwei funktionale Komponenten definiert, die TypesOfFruit und Fruits heißen. Nimm die Komponente TypesOfFruit und füge sie zusammen oder bette sie in die Komponente Fruits ein. Nimm dann die Komponente Fruits und verschachtle sie innerhalb der Komponente TypesOfFood. Das Ergebnis sollte eine untergeordnete Komponente sein, die in einer übergeordneten Komponente verschachtelt ist, die wiederum in einer eigenen übergeordneten Komponente verschachtelt ist!

--hints--

Die Komponente TypesOfFood sollte ein einzelnes div-Element zurückgeben.

assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');

Die Komponente TypesOfFood sollte die Komponente Fruits zurückgeben.

assert(
  Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type
    .name === 'Fruits'
);

Die Komponente Fruits sollte die Komponente TypesOfFruit zurückgeben.

assert(
  Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() ===
    '<h2>Fruits:</h2>'
);

Die Komponente TypesOfFruit sollte die Elemente h2 und ul zurückgeben.

assert(
  Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() ===
    'ApplesBlueberriesStrawberriesBananas'
);

--seed--

--after-user-code--

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

--seed-contents--

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      { /* 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 */ }
      </div>
    );
  }
};

--solutions--

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      { /* Change code below this line */ }
        <TypesOfFruit />
      { /* 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 */ }
      </div>
    );
  }
};