Studio: A Few of Your Favorite Recipes

One reason we are learning React is because many top tech companies use it, including Pinterest. On Pinterest, we can create boards and save pins of new recipes, wedding decor concepts, and tips and tricks for crafts. When one clicks on the pin, they are taken to a detailed view which includes a photo, a description of the pin, and in the case of recipes, ingredients one needs for that recipe. Today, we are going to try our own take on this page using React and what we have learned about components.

Before you start coding, find a recipe for some food you would like to eat! It can be any recipe, sweet or savory, but you should make sure that it meets the following:

The recipe is easily found online.
You can right-click on a photo of the completed item and get a valid URL of the image.
You can right-click on a photo of the author and get a valid URL of the image.
The recipe includes at least 5 ingredients.

Setting Up Your App

To get started coding, you need to first create an application.

Open up your react-exercises-and-studios repo and navigate into the part1 directory.
Create a new React app named studio with the command: npm create vite@latest.

Select the React and JavaScript options when prompted.

Install all of the required dependencies within the project using npm install or npm i.
Once your application is set up, run npm run dev to verify that your application runs and is ready to go.

The Components

First create inside src, a folder called components. Now tackle creating the components one-by-one.

The `RecipeDescription` Component

Inside the components directory, make a new file called Description.jsx.
Create a new function called RecipeAuthor(). For now, this function may not work as expected, but we have more work to do! This function should meet the following requirements:
1. Have no parameters.
2. Have three local variables: authorLink, authorPhoto, and authorName.
3. authorLink should contain the link to the recipe blog or if the author is not the owner of the blog, one of their social media profiles.
4. authorPhoto should include a valid URL pointing to a photo of the author.
5. authorName should contain the author’s full name.
6. Return something similar to the following:
```
return (
   <div className = {styles.recipeAuthorBlock}>
      <img src={authorPhoto} alt = "Reasonable alt text" className={styles.imageUpdates} />
      <div>
         <h3>{authorName}</h3>
         <a href={authorLink}>Blog name</a> 
      </div>
   </div>
);
```

Create a new file in the components directory called Description.module.css and add the following CSS to this file.

.recipeAuthorBlock {
display: flex;
justify-content: space-evenly;
}

.imageUpdates {
   object-fit: contain;
}

Return to Description.jsx and add this import statement: import styles from './Description.module.css;.
Add one more import statement: import React from 'react';
Add a class called RecipeDescription which extends React.Component. This class should have only a render() method which returns something similar to the following JSX:
```
<div> 
   <div>
      <h1>Recipe Title</h1>
      <p>Short recipe description</p>
   </div>
   <RecipeAuthor />
</div>
```
At the bottom of Description.jsx, add export default RecipeDescription;.

Head over to the App.jsx file within the root directory and replace what is inside with the following code:

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>
      <div className="App">
      </div>
    </>
  )
}

export default App

Add a second <div> and inside that add <RecipeDescription /> to call your new component. Add any necessary import statements. It should now look something like:
```
<div className="App">
   <div>
      <RecipeDescription />
   </div>
</div>
```
Run your application! You should have a white screen that just includes your RecipeDescription component.

The `RecipeIngredients` Component

Inside your components directory, create a new file called Ingredients.jsx.

Inside this file, add a new function called RecipeIngredients(). This function should include the following:

An array containing the top 5 ingredients of your recipe.
Return something similar to the following JSX:

<div>
   <h3>Recipe Ingredients</h3>
   <ul className = {styles.ingredientList}>
      <li>{ingredients[0]}</li>
      <li>{ingredients[1]}</li>
      <li>{ingredients[2]}</li>
      <li>{ingredients[3]}</li>
      <li>{ingredients[4]}</li>
   </ul>
</div>

Now create a new file in the components directory called Ingredients.module.css.

Add the following CSS to this new file:

.ingredientList {
   text-align: left;
}

Return to Ingredients.jsx and add the following import statement: import styles from './Ingredients.module.css';.
If you didn’t before, add export default in front of your RecipeIngredients() function declaration.
Head over to App.jsx.
Right below <RecipeDescription />, add <RecipeIngredients /> and the necessary import statement.
Run your application! You should now see a list of ingredients below your recipe description.

The `RecipePhoto` Component

Create a new file in components called Photos.jsx.
Add a new function called RecipePhoto() and add something similar to the following JSX to your return statement with the correct URL to your chosen recipe’s image:
```
<img src="valid URL to recipe photo" alt="recipe photo" className = {styles.imageUpdates} />
```
Add the following import statement to the top of your file: import styles from './Description.module.css';.
If you haven’t already, add export default to your function declaraction.
Head over to App.jsx and import the RecipePhoto component.

You will add <RecipePhoto /> above the inner <div>, but inside <div className="App">. Wrap <RecipePhoto /> and the inner <div> in another <div>. It should look like the following:

<div className="App">
   <div>
      <RecipePhoto />
      <div>
         <RecipeDescription />
         <RecipeIngredients />
      </div>
   </div>
 </div>

Now if you run your application, you will have all the info you need! Everything may look a little wonky. Let’s fix it!

Add some more CSS!

In App.css, add a CSS class to the bottom of the file.

.recipePhotoBlock {
   display: flex;
   justify-content: space-evenly;
}

Return to App.jsx and add className="recipePhotoBlock" to the <div> that contains <RecipePhoto /> and the innermost <div>.
Re-run the application to see the result!

Submitting Your Work

Before you submit, check out the solutions branch to see an example of how the application should work.

Save your work and commit and push to your remote.
Submit the link to your remote repository on Canvas.