Refactoring & Bugs

Refactoring & Bugs

December 16, 2015

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!

Refactoring

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">
     <h1>
       <i className="fa fa-clock-o"></i> Hours Spent Coding 
     </h1>
   </div>

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

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

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

Challenge

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.

Bugs

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.

Feedback

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