npx create-react-app my-app
cd my-app
Change the version of react and react-dom in package.json to 16.7.0-alpha.2.
Run npm install and then npm run start
Remove all files from the src/ directory and create a new index.js with the following content:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <h1>Places</h1>;
}
ReactDOM.render(<App />, document.getElementById("root"));Note If you are done early at any step setup Jest & react-testing-library and create tests for each of the components.
- Render the whole list into one component. It should contain a preview only showing the name.
- Add conditinal divs rendering the phone and email address if available in the data.
- Add a Phone component that replaces
+43with0and replace the phone rendering using this component - Add the following styles to your application and create a generic Card component rendering a div that's used to wrap each place entry in the list.
Hint leverage children to avoid that Card needs to know anything about place props
ul {
list-style-type: none;
padding: 0;
}
.card {
display: block;
border: 1px solid #ccc;
margin-bottom: 1rem;
padding: 1rem;
}- Bonus Exercise: Convert the card to accept a
tagprop so we can make the card an li-element instead of having adivinside andli.
You can start from your own app or use this template https://www.dropbox.com/s/gdrfd8ombtkw28i/my-app-1.zip?dl=0
- Create an
AddPlaceform with 3 fields:name,phone,emailand a submit button. Place the form below the list of places. - Move the places data into the state of the App and setup the AddPlace form to create a new entry.
- Make sure the namev is a required field and the form is reset everytime you click submit.
Hint This is tedious work, and for real world use-cases eventually you want to use form library like Formik or final-form.
- Use useRef & useEffect to build a Map component. Use the Google Maps API, Leaflet or similar.
- For each entry show a small map and center the map at the location position.
- Bonus Exercise: Add one larger map on top that accepts a prop
markersincl. the position and name. Use this to display all the places with markers.
- Refactor the Card styling to use inline styles, css modules, styled-components or emotion.
- Pick a styling solution of your choice.
- Improve the list layout to on the left side show the banner image of the location. If no image is available show the map. On the right side the details like name, phone, email and so on.
https://docs.google.com/forms/d/e/1FAIpQLSduti27Gold0T3WDtSe04Hi3V-yaBG0ChqAbS-t3-qoe4qsbA/viewform
