React, Redux & Foursquare
What You Will LearnThis tutorial uses:
- Foursquare API
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.
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.
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 RequestsRegister or Log In to View
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 ReduxRegister or Log In to View
In this video, we connect the Venues component to the Redux store and render the results from Foursquare in a simple list.
Design and UIRegister or Log In to View
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.