Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josecarneiro/ironhack-lab-wiki-countries-solution
https://github.com/josecarneiro/ironhack-lab-wiki-countries-solution
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/josecarneiro/ironhack-lab-wiki-countries-solution
- Owner: josecarneiro
- Created: 2020-06-02T10:52:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T20:54:27.000Z (almost 2 years ago)
- Last Synced: 2023-02-26T15:23:50.702Z (almost 2 years ago)
- Language: HTML
- Size: 8.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LAB | React WikiCountries
## Introduction
After spending too much time on GitHub, you found a [JSON database of countries](https://raw.githubusercontent.com/mledoze/countries/master/countries.json) and you decide to use it to create your Wikipedia for countries!
## Setup
- Fork this repo
- Clone this repo
```shell
$ 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 Pull Request so your TAs can check up your work.
## Instructions
### Iteration 0 | React Router installation
Don't forget to install the React Router:
```shell
$ npm install react-router-dom
```
And setup the router in your `src/index.js` file:
```jsx
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
```
### Bootstrap installation
We will use [Bootstrap V4](https://getbootstrap.com/) for the design :+1:
```sh
$ npm install bootstrap
```
```javascript
// src/index.js
import 'bootstrap/dist/css/bootstrap.css';
```
## Instructions
### Iteration 1 | Create components
In this iteration, we will focus on general layout. Before you start, inside `src` folder, create `components` folder. There you will create at least 2 components:
- `CountriesList`: For the general layout
- `CountryDetail`: This is the component that will receive the country code (`cca3`) in the URL. This is actually the id of the country (example: `/ESP` for Spain, `/FRA` for France).
To help you, 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](https://getbootstrap.com/docs/4.0) or check out how we approached to styling in the `example.html`.
For Windows users, there is no emoji for the `flag`. Instead, you can rely on these links:
- France: https://www.countryflags.io/fr/flat/64.png
- Germany: https://www.countryflags.io/de/flat/64.png
- Etc.
### Iteration 2 | Create the entire application
Everything is in the title. Good luck :smile:
In this case, you should use only 1 `` for `CountryDetail`.
Your `App` component should **always** show the list of countries.
Happy coding! :heart: