For this homework we will be making a basic site for a Recipe of the Day site.
You've been provided an empty react app that's ready for use. This is just the standard create-react-app
scaffold with a couple additions to prepare us for this app.
You've been given a directory called data
, inside there is a file called recipes.js
and another called recipeOfTheDay.js
. These files each contain data that will be used in this app.
The RecipeOfTheDay
Component renders all the information for the Recipe of the Day on the right side of the app. It will render all the data about the Recipe of the Day, Grandma's Mashed Potatoes. As part of that, it will render each ingredient from the recipe as well.
- Import the data from
data/recipeOfTheDay.js
intoRecipeIOfTheDay
component. - This component should have a method called
renderIngredients()
. This method should render anIngredient
component for each ingredient in the recipe! The ingredientname
andamount
should be passed to the eachIngredient
component via props. Lost? Remember to look at the examples from todays blog codealong (hint: it involves.map
). This method should be called in therender()
with{this.renderIngredients()}
. - The RecipeOfTheDay component should also render the
name
and thedescription
from the the data. - Add in the finishing details: in the render function add
<h2>
tags for "Recipe Of the Day", "Description", and "Ingredients" in the right spots. This test can just be typed directly render function, you do not need to use embedded javascript for these tags. - Add the
RecipeOfTheDay
component to be rendered in theApp.js
component.
The Ingredient component is used in the Recipe of the Day component. It renders each individual ingredient from the Grandma's Mashed Potatoes Recipe.
- In the RecipeOfTheDay component you passed the data for the ingredients each
Ingredients
component via props. Access the properties so that each ingredient has thename
andamount
values in therender()
function. You can use<p>
,<span>
, or whatever you feel make sense.
The Recipes Component is used to import the data from data/recipes
and render each Recipe
component inside of it. Each recipe gets its own component, so the Recipes
component also handles passing the data for each recipe to it's component. The Recipes
component is rendered in App.js
Note: be attentive to when Recipes
and Recipe
components are being used.
- Import the data from
data/recipes.js
into theRecipes
component. - This component should have a method called
renderRecipes()
. This should should render aRecipe
component for each recipe in thedata/recipes.js
file. Use the.map
strategy to pass the data asprops
to eachRecipe
. - Call the
renderRecipes()
method in therender()
function using{this.renderRecipes()}
. Also add an<h1>
tag at the top that says "Recipes". - Render the
Recipes
component in theApp.js
component.
The Recipe
component is used to render an individual recipe from the data/recipes.js
. All of them are rendered in the Recipes
component.
- For each recipe, render the
name
,servings
, andcategory
as<li>
tags. You might want to wrap that in a<div>
!
Add some basic styling so it your app looks decent. Bare minimum, give each component some dimensions and a fresh background color.