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
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.
componentDidMount to the
Card component and called the script from in there.
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!
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.