Having photography as a hobby makes me travel to places whenever I get a chance. When planning such trips, I needed a tool that assist me in analysing different routes. Google Maps is good, but it did not have the feature that I wanted. I.e. showing distance and time between individual destinations. Having a hammer called React, this problem really started looking like a nail to me.
I have been using React for a while at work. In short, I love it. For a couple of my other side projects, I was using Backbone, which was good. However, with the added knowledge of React, I was really looking for an opportunity to unleash its power :). So I decided to make a simple React application that uses the Google Maps API and helps me to plan routes for my trip.
Laying the foundation - browserify and npm
It is very important to have a good build system and module framework to organize your code. As your project grows, you’ll thank yourself for laying a good foundation in the beginning of your project. I decided to use Grunt and Browserify as by build system and bundler. Moreover, there’s a JSX transform called Reactify which makes it easy to use React and Browsrify together. With this, here’s my
package.json with all my project dependencies.
I have also added
grunt-contrib-connect as my dev dependencies. These two helps in compiling my
.scss files to
.css and serving static files during development.
As you can see I have also added a npm script for auto compiling my project -
Grunt build system
After you have your dependencies defined in a
package.json, next step is to create your build pipeline. For my project, all I needed is three simple tasks.
- Watch all my
.scssfiles for changes.
- When they change, compile them into
- A static web server for my development.
Gruntfile.js that include the above said tasks.
With the bundler and build system is in place, now its time to write the real code.
The React application
React provides the View part of the MVC model. All it needs a DOM element to render the React component. You can design your application to be a React component that contains other sub components. That’s exactly how I designed the route planner. A single
<Application/> component that contains all my sub components such as
Here’s a code snippet of my application.
Render the React component into the DOM
The Application component
With this structure, all you have to do is, create each components and define the
render() method for each of them. For example, here’s the
Handling the state
When designing a React application, it is very important to consider where you hold your application state. React suggests to have your components stateless. But if you want to have states, then hold the state as high as possible in the component hierarchy and pass it along to the child components as props. This way, there will be only one source of truth and data flow will be unidirection.
For my application, I decided to hold my state in the
<Application/> component which is the top level component.
getInitialState() function returns the initial state of my application. Whenever there’s some data changes, I have methods that update the
state object. When the state changes, React calls the
render() method of the
<Application/> component, inside which I pass the current state object to the child components.
I believe I showed you the basic structure of the Route Planner application. If you’d like to see more code, feel free to fork the route-planner project in Github. If you have any questions or wants to know more about any piece of code in this project, please leave a comment.