/practice-lab-react-ironbnb-client

Primary LanguageJavaScript

Warriors React IronBnB

LAB/Exercise to practice React concepts (React Router, props, state, useEffect, API requests...)

Our Goal

We're going to create a React application that interacts with an external API. It will have functionality to get information about apartments & create new apartments.

Sitemap/Wireframes:

Ironbnb API

HTTP verb URL Request body Action
GET /apartments - - - Returns an array with all the apartment documents.
GET /apartments/:id - - - Returns an apartment document by its id.
POST /apartments {
img: String,
title: String,
pricePerDay: Number
}		 Creates a new apartment document.
  • As you can see, it follows REST.
  • Responses are in JSON.

Iteration 0: initial setup

  • Fork + clone
  • Install dependencies
  • Run the app (hint: check package.json)

Iteration 1: General structure and routing

Create the following components (for now, just display an <h1> in each component):

  • NavBar
  • HomePage
  • ApartmentsList
  • ApartmentDetails
  • CreateApartment

Setup routing. You will need this behaviour:

  • The <NavBar /> component should be displayed in all pages
  • If user visits /, display the <HomePage /> component
  • If user visits /apartments, display <ApartmentsList />
  • If user visits /apartments/42, display <ApartmentDetails /> (note, that 42 must be dynamic -- use URL params)
  • If user visits /apartments/create, display <CreateApartment /> (note: in the code, you may need this route earlie... otherwise "create" will be treated as an apartment id)

Implement the NavBar with links, so that the user can navigate (hint <NavLink>).


IMPORTANT:

  • For this iteration, do not implement the details of each component, just the general structure (make sure the user can navigate through the app).
  • For the components hierarchy, keep all components as direct children of App.

Iteration 2: ApartmentsList

Implement <ApartmentsList />, so that it makes a request to the API and displays a list with all apartments.

Hint: you will need to use useEffect().

For now, don't worry about the button "more details" (we will implement this functionality later).

Iteration 3: Create new Apartment

Implement the logic for <CreateApartment />.

  • You will need a form (controlled component).
  • When user submits, we need to send a POST request to the API.
  • Once we get the response from the API, we can redirect the user to the list of apartments
    • do some research on how to redirect with react-router (hint: the library provides a custom hook useNavigate())

Iteration 4: ApartmentDetails

Implement the logic for <ApartmentDetails />. This component should make a call to the API and display the details of an apartment, based on its id.

Iteration 5: store API baseUrl in .env

Store API baseUrl in .env (since we're using Create React App, make sure your environment variable starts with the prefix REACT_APP_)

Submit

  • Submit Pull Request (same process as usual).
  • For this lab, no need to submit in students portal.

Bonus Ideas I

  • Single API call to get the info (instead of calling the API in <ApartmentsList> and <ApartmentDetails>)
    • Make one single call to the API in <App>
    • Pass the info as props to <ApartmentsList> and <ApartmentDetails>
  • Conditional rendering: if an apartment has no image, display a default image
  • Conditional rendering: if data from the API is not ready, display a message "loading"

Bonus Ideas II (those are a bit more advanced; if needed, do some research and/or ask your LT/TAs)

  • Display spinner/loader while data is loading
    • Option 1: there's many websites where you can find CSS for "spinners", for example here. You can copy the CSS and then render a div with that specific className.
    • Option 2: render a component from a component library. For example, if you're using Ant Design, you can use this component
  • CSS: Apply different ways to style React components (inline css, plain css with one file per component, scss...).
  • CSS: use a component library (ex. React Bootstrap, Semantic UI, Ant Design, Chakra, Material UI...)
  • (advanced) create a service (a function or class in charge of all requests to the api)
  • (advanced) Convert all function components to class components (note: the syntax to use props, state and api requests is a bit different in class components; do some research)