- Practice rendering static children components
- Have some fun with the rendered components in the browser
In this lab, we will be rendering a few children components in our top-most
component: App. All of our work will be done in src/App.js, the rest of the
components/source files shouldn't need any alterations.
Begin with npm install. Examine what is rendering in the browser
with npm start. You should see an error we need to fix!
Once we properly render the other three components: CatComponent,
GraceHopperQuoteComponent, and MouseComponent in App, we will have the flag of
the Federal Republic of Germany, the birthplace of the first fully
automatic, programmable, digital computer!
Admiral Grace Hopper, on the other hand, was an American computer scientist and United States Navy
admiral. She was a pioneer of computer programming who popularized the idea of
machine-independent programming languages, which led to the development of COBOL.
-
Two components have not been properly imported in
src/App.js. Identify and debug the issue. The stack trace when runningnpm testshould point you in the right direction! HINT: take a look at the component files. One of these components is exported bydefault, but the other is not. How does this change importing? -
Once you have the first two components importing correctly, import and render a third component,
MouseComponent. In total,Appneeds to render three children components:CatComponentGraceHopperQuoteComponentMouseComponent
-
Once the tests are passing, make sure to check out the fun animation in the browser by running
npm start!