- Practice rendering static children components
- Have some fun with the rendered components in the browser
In the labs throughout this section, we'll be working on building a small portfolio site in React.
Our goal for the first lesson is to get the basic components for our app — the
<Navbar>
, <Home>
, and <About>
components — to be returned from the
<App>
component.
Once we're done, we should get something like this:
For 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/components/App.js
, the rest of the
source files shouldn't need any alterations.
Begin with npm install
. Examine what is rendering in the browser with
npm start
. To start, work on getting the app to match the screenshot above. Then, open up a second terminal (open to the same directory), and run learn test
or npm test
to check your work.
-
Two components,
<Navbar>
and<Home>
, are already defined in theApp.js
file. Display both of these components as child components of<App>
. -
Create a third component,
<About>
. The<About>
component should also be a child component of<App>
.- The
<About>
component should return a<div>
with an id ofabout
. The div can also optionally have some additional text content and other elements inside — as long as it has an id ofabout
, it will pass the test!
- The