API Communication


Not CompletedSection Introduction and DevCamp Space Registration

So far in this course all of the data that we've been utilizing has been hard coded directly into the application.

Not CompletedOverview of DevCamp Space

In the last guide we walked through how to sign up for an account on DevCamp Space and we also talked about kind of a high level view of what API's are.

Not CompletedHow to Install Axios in React to Communicate with APIs

So now that we know what the data's gonna look like, and also, the URL that we are going to access to grab our portfolio items, in the next few guides, we're gonna see what steps we need to take in order to implement the ability to go out and access that data and pull it directly into our application.

Not CompletedMaking the Initial API GET Request in React

Now that we have Axios installed on our system, we can actually communicate with the APIs.

Not CompletedOrganizing Portfolio API Query into the Portfolio Container Class

Now that we have all of our data coming in, I'm gonna do something that may seem a little counterintuitive, and that is we're gonna focus next on just moving the data call from the app component, which is the parent component for the entire application, into the home component.

Not CompletedHow to Render API Data in React

This is gonna be a really fun guide, because this is the guide where we are gonna connect everything.

Not CompletedHow and Why to Use the Key Prop in React

So now that we have our data actually rendering out onto the page, let's see what the issue is with that warning.

Not CompletedPopulating the Portfolio Item Data

We're gonna take a little break from coding in this guide and we're going to get some real data that we can work with.

Not CompletedHow to Log Data Coming in from an API in React

Since the last guide, I've added in all of the data elements that I mentioned. So now I have, if you come all the way down, I have 12 various portfolio items.

Not CompletedIntroduction to the JavaScript Debugger

In the last guide, we walked through how we could get a view of our data and we used the console log in order to see that in the browser.

Not CompletedIntroduction to the React Developer Tools

In the last guide, we walked through how to use the JavaScript debugger.

Not CompletedUsing the Debugger to Extract API Key Names

Now that you know several different ways to access and get a view of the data that you want to work with, now we're ready to start connecting that knowledge with actually bringing that data and rendering it on the screen.

Not CompletedRefactoring the PortfolioItem Component to Use Destructuring

In the last guide, we picked out the exact names that we need for our API.

Not CompletedHow to Render Images in React from an API

So I know this has been a long section and I really wanted to isolate how you can work with APIs in React because that's gonna be something you're most likely gonna be doing on pretty much a daily basis as you build out your own React applications.

Quizzes


API Communication
    Unsupported Browser

    devCamp does not support ancient browsers.
    Install a modern version for best experience.