/spacex-api

Primary LanguageJavaScript

Space X Launches

react bootstrap axios

Display scheduled launches associated with SpaceX. This app maps through launches from the open API and displays them in a Bootstrap grid with additional information on each launch.

My first step was to install React framework, initialize a Git and install dependencies i think i may need: Axios and Bootstrap. I run the Space X open API through Insomnia to easily view what data i would get as a response. I proceeded to code Axios to connect to the API and set responses and error to state values. UseEffect runs the function and loads data on DOM load & component refresh. I send the response data through to the launch list and launch components. I'm having some trouble passing the ID through as a key to the correct element - will come back later. A ternary condition shows a refresh button unless launches are loading. I created a map to cut through the data and group them into individual launches. Using bootstrap grid i've built each launch into rows and columns, so far everything seems to be responsive. Added a second API call to get the rocket data, response was an infinite loop - thinking - it may work sending the props through a rocket component. Added flex, padding and justify content css. I would like to do more but i'm out of time.

Installation

  npm install

Run

To run this app use commands

  npm start

Socials

Support Me