/lab-wiki-countries

Primary LanguageHTML

logo_ironhack_blue 7

LAB | React WikiCountries

Introduction

In this lab you will use Ironhack's country API, to create your own Wikipedia of countries!

Example - Finished LAB


Setup

  • Fork this repo

  • Clone this repo

  • Open the LAB and start:

    $ cd lab-wiki-countries
$ npm install
$ npm start

Submission

  • Upon completion, run the following commands:

    git add .
git commit -m "done"
git push origin master

  • Create a Pull Request so that your TAs can check your work.


Getting Started

Clean the App.js component so that it has the following structure:

// src/App.js
import './App.css';

function App() {
  return <div className="App"></div>;
}
export default App;

Instructions

Iteration 0 | Installation and setup

Remember to install the React Router package:

$ npm install react-router-dom

And setup the router in your src/index.js file:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Router>
    <App />
  </Router>
);

// comment omitted for readability
reportWebVitals();

Bootstrap installation

We will use Bootstrap for the design 👍

$ npm install bootstrap

To make the Bootstrap styles available in the entire app, import the stylesheet in index.js:

// src/index.js
import 'bootstrap/dist/css/bootstrap.css';

Instructions

Iteration 1 | Fetch countries data from the API

In App.js, make a GET request to the URL https://ih-countries-api.herokuapp.com/countries. Use the data returned from the response as the list of the countries. You can use either fetch or axios to make the request.

You should use the useEffect() hook to set an effect that runs only once and makes a request to the API. Once you receive the response data, save it in a state variable. The request should happen first thing when the application loads.

Iteration 2 | Create components

In this iteration, we will focus on the general layout. Before you start, inside the src folder, create the components folder. There you will create at least 3 components:

  • Header: Displaying the basic header with the LAB name

  • CountriesList: Displays the list of links with the country names. Each link should be a react-router-dom Link which we will use to send the country code (alpha3Code) via the URL. It will act as a navbar for the countries.

  • CountryDetails: This is the component that we will render via the react-router-dom's Route, and it should receive the country code (alpha3Code) via the URL.

    This is the id of the country (example: /ESP for Spain, /FRA for France).


To help you with the structure of the components, we gave you an example of a page inside example.html.

If you want to style it, refresh your memory on Bootstrap in the docs or check out how we approached styling in the example.html.


NOTE: If you decide to copy the code provided in the example.html, keep the following in mind:

  • In React, the class html attribute is defined using className
  • For inline CSS, use a JavaScript object and name each CSS property in camelCase (more details here).

Iteration 2.1 | Header component

Create a header component that displays the title LAB - WikiCountries.


Iteration 2.2 | CountriesList component

This component should receive the list of countries from App and render a list of Links, each having a country's alpha3Code embedded in the URL. Clicking on a Link should render the CountryDetails component.


Iteration 2.3 | CountryDetails component and Route setup

Now that our list of countries is ready, we should create the CountryDetails component.

The alpha3Code of the country will be available through the URL parameters. To access the URL parameters, from the browser's URL bar, use the React Routers hooks useParams. For a reminder on setting up and accessing the URL parameters with React Router, check this example.


NOTE: If you haven't added CSS, the country details may be displayed at the very bottom of the page.


For the small picture of the flag, you can use the lowercased alpha2Code and embed it in the URL as shown below:


Iteration 3 | Fetch one country data from an API

Using the useEffect hook set an effect in the CountryDetails component. The effect should make a request to the API and fetch the data for the specific country. You can construct the request URL using the country's alpha3Code. Example:

The effect should run after the initial render, and each time the URL parameter with the alpha3Code changes.

Iteration 4 | Linking it all together

App should have a state variable countries holding the data coming from the API. The data from this state should then be passed to the CountriesList component as a prop.

Once done creating the components, the structure of elements that your App.js will render should look somewhat like this:

// ...

<div className="App">
  <Header />

  <div className="container">
    <div className="row">
      <CountriesList countries={countries} />
      {/* React-Router Route rendering the CountryDetails should go here */}
    </div>
  </div>
</div>

// ...

Happy coding! ❤️