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.
What You Will Learn
This tutorial uses:
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.
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.
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.
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.
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.
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.
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.