For this and the coming exercises, you can proceed with the same project. Make a copy or a new branch for each exercise, so you can look back later on. There is a start project provided for your convenience. We'll learn later how you can create this yourself.
Have a look at the project. (There is a lot already in there)
We will focus on the App.jsx
file for now. You can see that we have a component called App
that returns a article
with some content in it.
The goal for this exercise is to separate this component into smaller components.
- Create a new component (in the same App.jsx file) called
Bio
which contain the<p>I live in...</p>
and use this component in theApp
component. - Create a new component called
Meals
which contains the entirearticle
tag. Use this component in theApp
component.