Getting Going with React, Part II: On to Development

part one here | completed portfolio site redesign here

Rather than jumping into a full web application, I decided to start small with something I could finish in one sitting. I already had designed my portfolio site to use card-like visual components for each project. Having read over this article on thinking in React, I figured a rebuild would be a natural fit.

Step one was to dump all of the content into a JSON file, which I could use instead of an actual database. This approach made sense because of the small amount of content, the lack of updates to the site [working on this!], and my lack of interest in setting up & maintaining a database through my shared web hosting service.

Next up, which is probably the most important part of any project: coming up with funny variable names that are both descriptive and part of a larger theme. As Adam Anderson, of Q2, once noted in a lecture, “Half of coding is naming things.” I decided to build on the card theme: each project would be displayed in a Card; the code to iterate over all of the content and return the complete card component would be the Deck; and the code that retrieved the data from the JSON file would be the Dealer.

The roles and links at the bottom of the card didn’t fit in a way that I liked, so I broke them out into their own components. Sadly, I couldn’t think of names that would both be descriptive and fit with the theme. The bonus of moving them into their own components, however, was that I got some more experience writing code in JSX.

Dealer Component

Deck Component

Card Component

A Couple of Things

• I had a script that I called at the bottom of my original HTML page to ensure that all of the cards were the same height. With the new configuration utilizing React components, leaving the script in the same position meant that it got called before the cards finished loading, which meant nothing happened. So, on a tip from the same coworker who started this whole mess, I added componentDidMount to the Card component and called the script from in there.
• I needed to add certain classes to certain cards in order to get the titles to sit in the middle of the cards and block out the appropriate amount of border. Introducing React.addons.classSet. In each card’s chunk of JSON, I added a boolean attribute (for example, markov: true) and in the process of building the array of classes to add to each card, I dropped in a few checks for truthiness:

[other stuff],
'small-6 medium-12': this.props.data.markov,
'small-5 medium-9': this.props.data.mars,
[continuing with stuff]

Probably a bit whack, but it worked. Suggestions for improvement, though, are always welcome!

Parting Thoughts

React.js is a nifty library and I want to get in some more time playing with it. I’m currently working on a side project using D3.js and it’s been tempting to try to find a way to shoehorn some React into it. However, I realize that it would be overkill and jQuery is going to be more than enough for my app’s needs. For now, I’ll have to settle for late night binge-coding sessions.