Why does the second class run before the first class?

I did not have a problem solving this; but, it hard for me to understand why the TypesOfFood return its child before the class Fruits.

    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>
        );
      }
  };

Also, this is in the React section called Compose React Component

Don’t understand the question. TypesOfFood component is returning its child Fruits component which is the Fruits class.