You will have 4 hours to finish this checkpoint. This checkpoint is not an exam, it will allow us to validate your skills, so try to do it as much as possible on your side. This checkpoint is very consistent, if you can't do everything it doesn't matter, do your best;)
- Clone this project
- Create a
city_lastname_firstname
branch, which will contain your progress. Replacecity_lastname_firstname
with the city of your campus, your last name and first name.
In this step, you will create a new React project in which there will be 2 components that will display data from an API.
The API is available on this url https://wild-games.herokuapp.com/api/v1. You can use either axios or fetch to recover the data.
Think about `commit' regularly with an explicit message. For example: Create GameList and Game components
.
Friendly Tip: before starting, make the component tree and wireframes! :)
- Create a new React project named list-games using
create-react-app
. - Create 2 components
<GameList />
and<Game />
. - Use
<GameList />
component to fetch from the API and display each game on a<Game />
component. <Game />
retrieves withprops
the information of each game (name
,background_image
,rating
...) and displays it in the format of your choice.<Game />
contains a<button>
that removes a game on click from thestate
. There is no need to remove it from the API.
Do you have any time left? Perfect! Perfect! You will be able to add some useful features to your React project!
- Add a
Best Games
button to filter games byrating
. - When you click on the button, only games with a
rating
greater than or equal to 4.5 are displayed. - The button text is replaced by
All Games
and when clicked, all games are displayed again.
For this bonus, use the react-router
library.
- Add a navigation link in each game to see the images listed in the
short_screenshots
field. - Clicking on this link changes the page to
http://localhost:3000/jeu/screenshots/5
where 5 is the id of the selected game. - Also display a navigation link to return to the home page.
You can quench your thirst at the brewery, you've earned it!
N.B.: You don't have to start with this step...;)
Pour ce travail tu as 4h devant toi. Ce checkpoint n'est pas un examen, il va nous permettre de valider tes compétences, essaye donc de le faire au maximum de ton côté. Ce checkpoint est très consistant, si tu n'arrives pas à tout faire ce n'est pas grave, fais de ton mieux ;)
- Clone ce projet
- Crée une branche
ville_nom_prenom
, qui va contenir ton avancée. Remplaceville_nom_prenom
par la ville de ton campus, ton nom et ton prénom.
- Pour répondre au quiz rend toi sur cette application.
- Réponds aux questions du Quiz Checkpoint 2 - JS - React
- Une fois le quiz terminé, copie le lien fourni par l'application
- Crée un fichier Quiz.md à la racine du projet
- Colles-y le lien que tu viens de récupérer
commit
ton fichier
Dans cette étape, tu vas créer un nouveau projet React dans lequel il y aura 2 composants qui afficheront des données provenant d'une API.
L'API est accessible sur cette url https://wild-games.herokuapp.com/api/v1. Tu peux utiliser au choix axios ou fetch pour récupérer les données.
Pense bien à commit
régulièrement avec un message explicite. Par exemple : "Create GameList and Game components"
.
- Crée un nouveau projet React nommé list-games grâce à
create-react-app
. - Crée 2 composants
<GameList />
et<Game />
. <GameList />
récupère les jeux de l'API et les affiche dans autant de composants<Game />
.<Game />
récupère avec desprops
les informations de chaque jeu (name
,background_image
,rating
…) et les affiche au format de ton choix.<Game />
contient un<button>
qui permet au click de supprimer un jeu dustate
. Il n'y a pas besoin de le supprimer de l'API.
Il te reste du temps ? Parfait ! Tu vas pouvoir ajouter quelques fonctionnalités utiles à ton projet React !
- Ajoute un bouton
Best Games
pour filter les jeux parrating
- Quand on clique sur le bouton seuls les jeux dont le
rating
est supérieur ou égal à 4.5 sont affichés - Le texte du bouton est remplacé par
All Games
et quand on clique dessus, tous les jeux sont affichés à nouveau
Pour ce bonus, utilise la librairie react-router
.
- Ajoute un lien de navigation dans chaque jeu pour voir les images listées dans le champ
short_screenshots
. - Cliquer sur ce lien change la page pour
http://localhost:3000/jeu/screenshots/5
ou 5 est l'id du jeu selectionné. - Affiche également un lien de navigation permettant de revenir sur la page d'accueil.
Tu peux aller te désaltérer à la brasserie, tu l'as amplement mérité !
N.B. : Tu ne dois pas commencer par cette étape… ;)