rioredwards/animal_farm

React Animal Farm

Use this app as a template for your deliverable!

Learning Objectives

• Use className attribute to set styles versus style = {{ background: 'magenta' }}
• Display images in a React app
• Use attributes in parent components to pass data down to child components as props
• Use {} as "portals" in the render method to do JavaScript inside our HTML
• Use .map to iterate over an array and render new elements for each item in an array
• Use jsx to produce & render a React component
• Use Netlify to deploy a React app

Description

Welcome to the Alchemy Farm! For this deliverable, you will practice creating functional components, mapping through lists and rendering a component for each item.

There is a list of animals provided for you in data.js, as well as an empty <Main /> component and an empty <Animal /> component. You need to add the code to display the animals by mapping through the list provided and rendering an <Animal /> component for each animal. The final product should look like this:

Acceptance Criteria

• <Main /> should import background.png and set it as a background image on the <main> element
• <Main /> component should use a .map to loop through and render an <Animal /> component for each animal listed in data.js
• Animals should be positioned dynamically using the style attribute in JSX and props
• should utlize the existing classes in Animal.css
• App should be deployed on Netlify

Rubric

Task	Points
Main branch deployed to Netlify	0.5
Open PR from dev branch with Netlify deploy preview	0.5
Uses a .map to render <Animal /> component for each animal in data.js	3
Properly passes props to <Animal />	3
Dynamically sets the style attribute in JSX to position the animals	2
Utilizes existing classes to properly display animals	1

Stretch Idea

• Find some audio sounds of farm animals and research how to add click handlers to elements in React - play the sound on click

Image Attribution

Background Image by OpenClipart-Vectors from Pixabay