In this deliverable, you'll consume the Star Wars API and render it's data.
To get set up:
- Fork and clone this repo
- Use
create-react-app .
to create a React app inside the current directory - Open VS Code.
- Open a terminal in VS Code.
- Start the React Dev Server.
Styling is secondary to completing the functionality
-
You should begin by familiarizing yourself with the API in postman. Hit the starships endpoint and explore the data that you get back.
-
In your
<App>
render a<Starships>
component that obtains all of the starships from the SWAPI. -
Your
<Starships>
component should map the data retrived from the SWAPI into to<Starship>
components that get rendered. Include at least the name and class of the starship and any other data you think is interesting to show th user in the<Starship>
component.
-
Hold the starships in state.
-
You API call will need to go in either a
componentDidMount
method (class component) oruseEffect
hook (function component).
-
you may notice that not many starships come back from the API's starship endpoint -- if you explore the data in postman you will find urls with query strings to get more pages of startships. Can you think of a way to integrate this into your app and show the user all of the starships?
-
Enhance the
<Starship>
component list the names of the pilots for that starship by mapping the data to a<Pilot>
component.- If the starship has no pilots, display a "No Pilots" message.
HINT: research mapping an array of pending promises and awaiting for them all with Promise.all()
. This is much easier this async/await
. But be careful! you will want to use async/await
along with useEffect
correctly in React, if you are using hooks.
- Style your App! There are so many ways to style in react. Have some Fun!
Adapted from react-ajax-swapi to not use the react-router-dom
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.