Code Monkey home page Code Monkey logo

http-mini-sprint's Introduction

HTTP / AJAX Mini Sprint

Topics

  • Axios for making HTTP requests
  • JavaScript Promises

In this mini sprint, you'll be eased into the code base for the actual HTTP sprint. Upon cloning this repository, take a moment to look over the different pieces that are already in here. There shouldn't be anything too scary; it's just another React app created using create-react-app with some custom styling. The important bits are inside the components folder.

Running the Application

To run the mini sprint code, first run npm install in the root directory. Then run npm start to run the server. In another terminal, cd into the client directory, run npm install, then npm start. You'll see that we have a non-functioning React app with some compilation errors.

Instructions

The FriendsList component renders an array of friend objects. Your job for this mini sprint is to add the code necessary inside FriendsList.js to fetch this data from the server and populate the list.

Hint: The endpoint to get a list of friends is: http://localhost:5000/friends.

Once you get through the sprint and have the list of friends being rendered by the FriendsList component, take some time to read about HTTP, Promises, AJAX, and any of the other topics we touched upon during the lecture.

Helpful Links

  • Promises for Dummies -- A pretty thorough and cohesive writeup on Promises. I would suggest starting here first.
  • AJAX Documentation on MDN -- A good place to start reading about and delving into the different parts that make up the AJAX standard.
  • JavaScript Promises Plain and Simple -- This article talks about using Promises in the context of making HTTP requests, which means it's pretty perfect for our use case. Note that in their examples they use the fetch API, which is an alternative to Axios.

http-mini-sprint's People

Contributors

seanchen1991 avatar luishrd avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.