How to Connect your React App to a REST API – codeburst

  • Today we are going to connect this app to an existing REST API and use the fetched data to display our previously created list of contacts.Over the whole series of articles, we’re going to build a functional contact list with React:Part 1 — How to Create a React App with create-react-appPart 2 — How…
  • This way, the app fetches contacts at the startup and fills our contact list with data.PreparationsIf you don’t have the source code of the previous part ready, you can clone it from GitHub, install the dependencies and start the appgit clone contacts-managergit checkout part-2npm installnpm startThe app is now available…
  • To begin, let’s install axios: In your root directory (where your package.json is) execute the following command line:npm i -S axiosNext, open your App.js and perform the following actions:add the componentDidMount lifecycle method to the App component.import axios from the just installed packageadd the axios GET request to componentDidMount to…
  • Since it is empty, it is the initial State object with a replaced “contacts” property.Finally — Set the new StateNow that we got our data, picked the relevant parts out of it and created a “new” State object, we store it in the State of the App call, puts the “newState” object as…
  • Also, you learned that if you want to fetch data from a server at the startup of the app, you’ll do it in componentDidMount in a suitable component.You also learned, how to set State and that you can pass an object or a function to setState.Last but not least, you’ve…

In the previous parts of this series you learned how to bootstrap a new React app with create-react-app and create a list component. Today we are going to connect this app to an existing REST API and…
Continue reading “How to Connect your React App to a REST API – codeburst”