Code Pub Berlin

Getting Started

Prerequisites:

• Node
• Text Editor (Visual Studio recommended)

Or use the online IDE and skip to the workshop

Clone the project

Run yarn install or npm install

Run yarn start or npm start

Then open http://localhost:3000 to see your app.

Workshop

1. Add the RecipeCard component to the app

   1. Import the RecipeCard component
   2. Add the RecipeCard component

2. Add the name of your favourite recipe and an image to the RecipeCard component

   💡 You can use the image we imported for you called placeholderImage

3. Use real recipe data

   1. Add the recipe’s title
   2. Replace the placeholder image with the recipe’s image

   💡 Have a look at recipes.json file to see what data we have

   💡 Remember how the Button component got to know its name

4. Make it BEAUTIFUL ✨

   1. Beautify recipeContainer
   2. Beautify recipeCard
   3. Beautify the image

   💡 Use the styles we imported for you

Hurray! You're done! 👏

Bonus

1. Display a single recipe when clicking on a recipe 1. Create your own component called RecipeDetailsCard 1. Display the title

   1. Display the image
   2. Display the recipe

   💡 Remember what we learned about the state

Read more

• style
• map function
• {} → curly braces
• <> → JSX
• passing functions
• state
• json files

---

This project was bootstrapped with Create React App.