Bonus content! This is just extra content that will improve your code and make you a better developer! It is not necessary to do this step before deploying to Heroku but if you have the time, do it!


React is all about small components that can be reused. For that we should make the components that we have created so far, smaller and into individual components.

Go over each component again and move the divs that contain content into their individual React components. For example the title could be a container:

   <div className="page-header text-center">
       <i className="fa fa-clock-o"></i> Hours Spent Coding 

And each row in a column should be a component as well:

   <div className="col-md-4">
     <HourForm />
     <HourList data={}/>    
   <div className="col-md-offset-2 col-md-6"> 
     <HourChart data={this.mapData()} />

Have a look at the other components too. The smaller, the better and more reusable ultimately.


The current chart implementation is quite simple and could be much more sophisticated! Check out the D3 documentation and see if you can implement dynamic dates on the x-axis that could be clicked through to see specific dates rather than generic week days.


Check your code, play with your web app. Do you notice something odd when you add and remove hours? Why is that? What is happening?

Once you're finished with all of this, let's go and deploy our new web app to Heroku.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more