React, Redux & Foursquare


The Daily Slate | React, Redux & Foursquare
In this series, we create a simple app that queries the Foursquare API for nearby venues based on a zip code and category entered by the user. This project has no server (Node JS) integration and is therefore a good starting point to learn React/Redux only. This is a simple project that shows how to integrate Redux and process data from API requests.

Who

This tutorial is well suited for beginners who have basic Javascript experience but little to no knowledge of React and Redux. If you are a complete beginner with no coding experience at all, this is too advanced and we suggest learning the basics of Javascript and object oriented programming (tutorials on that will be posted soon).

What You Will Learn

This tutorial uses:
  • React
  • Webpack
  • Babel
  • ES6
  • Redux
  • Foursquare API

Units


1. Setting Up

In this video, we set up the project for React using ES6, Webpack, and Babel. We create a simple React component and transpile it to ES5 using Babel. Then we render it on a basic html index page to confirm that the set up was successful.

2. Search and Results Components

We start building out the actual UI components to support a search bar and results page. The search component, called Nav.js will include a text field where the user enters a zip code. The results component, called Venues.js will render the actual search results from the Foursquare API.

3. Tracking User Input

We begin the app logic with the Nav component - we track the values typed into the input filed using component state and respond to the button click with a method. This prepares the app flow to request the Foursquare API next.

4. Making API Requests

In this video we finally make an API request to Foursquare. In order to do so, we incorporate a library called Superagent and perform the request then parse then results in the console.

5. Redux

In order to pass the data from Foursquare to other components, we need Redux. In this video, we create the basic set up for Redux integration and add it to the project.

6. Updating From Redux

In this video, we connect the Venues component to the Redux store and render the results from Foursquare in a simple list.

7. Design and UI

In this video, we add Bootstrap to create a better looking design and UI for the site. In addition, we add a search filter to the nav bar which enhances the search capability of the app - user's can search for food venues, coffee shops, fitness places, etc.

Purchase

$15.00

Purchase this tutorial for $15 and receive all videos, code samples and access to the forum where people post questions and answers.

Purchase, $15

Membership

Premium

$19.99/month

Join as a premium member for $19.99 each month and receive unlimited access to all tutorials, code samples, and forums on the site.

  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
Join

Basic

Free

Join as a basic member to gain access to the free tutorials, get notifications when new tutorials and courses are published, and participate in the Q&A forums.



Join