React Static Components Lab


  • 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 running npm test should point you in the right direction! HINT: take a look at the component files. One of these components is exported by default, 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, App needs to render three children components:

  1. CatComponent
  2. GraceHopperQuoteComponent
  3. MouseComponent
  • Once the tests are passing, make sure to check out the fun animation in the browser by running npm start!
Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us