Since beer is one of the most consumed drinks between Ironhackers 🍻, our mission here is to create an app to showcase some of the best-handcrafted beers. Our end goal is creating something like this:
- Fork this repo
- Clone the forked repo
$ cd lab-react-ironbeers
$ npm install
$ npm start-
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.
We will be building a React app so the API (server) needs to be built somewhere for us, right? You are completely right, it's deployed on heroku and the root fo the API is:
https://ih-beers-api2.herokuapp.com/beers.
There are multiple endpoints in this API, but we're only going to be using the following one:
| Method | Endpoint | Response (200) | Action |
|---|---|---|---|
| GET | /beers | [beers] | Get all the beers from the DB |
The IronBeersLifecycle project will use this enpdoint to list the existing beers.
❗ Shoot for the stars! Focus on mobile first design! This is a bonus, so it's up to you. 👍
To get started, we need to model our app, starting by creating a BeersList component.
This component should initially just display a Loading... text. The reason is that, since the beers info comes from the API which can take some time to reply, we must display something while the user waits. So let's do just that!
Once we have that out of the way, we can focus on getting and diplaying the beers!
The list of beers will come from the API, specifically from the beers endpont: https://ih-beers-api2.herokuapp.com/beers. We need axios for this! So the first step is to install it:
npm install axios
We know that API calls shouldn't be performed on the constructor or render method, but luckily we just found out about the lifecycle of a React component. We only want the beers list to be loaded on the first render, so we should use the componentDidMount lifecycle method to get the beers.
🕵️ Hint: The array of beers is an array of objects. We strongly advise you to open the URL to see the response format in the browser!
You can start by dysplaying just the name of the beer.
The first time you call the API, it might take a bit to respond. It's hosted on Heroku, and it goes to sleep after 30 minutes, you know! 😉
For this iteration, we want to expand the information we show. You should display the following from each of the beers:
imagenametaglinecontributed_by
Remember to think in React! You should create a Beer component for this 😉
We are done! 🏆
Awesome! Grab a beer (if you're not underage 😉 )! Now you are a React Warrior, keep training to become the Ninja!
Happy coding! 💙