/velib-map-react

[ReactJS] Paris Velib map using JCDecaux API - 11/2016

Primary LanguageJavaScriptMIT LicenseMIT

Paris Velib Map

[ReactJS] Training with Velib API in Paris area

Technologies

  • ReactJS
  • React Google Maps (with Clusters)
  • Bulma CSS
  • Webpack
  • Async fetch w/ Promise

Features

###/!\ This repo does not use Redux for state management.

However, it uses a 3-level bidirectional data flow:

  1. The <Stations> component is a container wrapping two components: <Map> and <StationCard>.
  2. <Stations> contains the handleMarkerClick function which is passed to the <Map> component as props, which passes it to the <GoogleMapWrapper> component, which also passes it to each <Marker> component created.
  3. Then, when a user clicks on a marker, the handleMarkerClick function (passed through the nested Components above as props) is called with the marker as argument, allowing the <Stations> container to retrieve the station selected (marker clicked) and set it in its state.
  4. The selected station set in the state is passed to the <StationCard> component, which can then display all the informations about the station.

Preview

velib