Refactoring & Bugs

Refactoring & Bugs

December 16, 2009

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.

Join Make School Icon

Join Make School

Prepare for your career as a founder or software developer

Apply now
Talk to Us Icon

Talk to Us

If you have any questions, please send us an email.

Email Us