Problem B
In this exercise you will practice developing a React application with components, props, state, and events. You will do this by converting an existing “static” website into a dynamic one.
Specifically, you will be implementing a dynamic website supporting pet adoption (like at an animal shelter). You can see what the website will look like by opening up the pets- mockup/index.html file in a browser: you will produce a dynamic, interactive version of this site using React.
Running the Program
Because this app is created with React (and scaffolded through Create React App), you will need to install dependencies and run a developer web server in order to transpile and view the application. You can run this server by using the command:
# from inside the `problem-b/` folder
cd path/to/problem-b
# install dependencies
npm install # only once
# run the server
npm start
You can then view the rendered page in a web browser. Remember to check the Developer console for any errors!
Exercise Instructions
To complete the exercise, edit the included src/App.js file and add in the required code. Note that you should NOT edit any of the other provided files (including index.js or index.html ).
(To make testing easier and more consistent, you will be defining all components for your App inside of the App.js module, as opposed to organizing them into separate modules).
Background: The first step to creating a React app is determining what components your page will need. One good way to do this is to start with a static version of the page (e.g., pure HTML/CSS) and try and break it up into different “parts”. These will often correspond to semantic sectioning or
elements.
Think about what “boxes” you would break the page up into!
You can then convert each of these parts into a React Component, as detailed below:
1. First, implement a component App that will represent the “overall” application. This component will be responsible for representing the outline of the page: think everything inside the
(though major sections will be defined by other components to keep things separated).
Give the App component a render() function that will output the main “page structure” found in the pets-mockup/index.html file (you can and should copy-and-paste from that html file into JSX!). This should include the
, , and