React & JSX Lab
JSX and React
Your mission now is to build a static site for a pizza place. On this site you will be using React to build out small components for each section of the site, and show info about their menu and locations through data we've provided.
Your end product should look something like this: https://wdi11-pizza.herokuapp.com/
You will be working in the
pizza-express folder. This repository was created using
create-react-app, but has additional data and styling to help you get started with the site.
- Install the dependencies using
- Open your text editor.
- Start the dev server using
Use the deployed version of the app to build your own version. You will need to create a components folder to put your new components in. Use these 8 component names to build your app:
We have also provided css for you in
index.css. Many of the classes match the component names, take a look at the CSS or look at the deployed version using the element tabs in chrome dev tools to get an idea of where to apply the classes.
- Import the location and menu items using the import command. Example:
import menuData from '../pizzaData.js
- Loop through the provided data by using
- Use the
MenuItemcomponent as a single instance of a location or item. You will apply props to these components from the mapped array of data.
Deployment (Stretch Goal)
Once you finish your site, let's deploy it onto Heroku using the
git init heroku create --buildpack https://github.com/mars/create-react-app-buildpack.git git add . git commit -m "Deploying with create-react-app" git push heroku master
When you complete the app, submit via Schoology. Include both a link to this repo, and a link to the deployed app if you completed the stretch goal.