Using Free CSS3 Templates with React (Part 1)

I’m a developer not a designer. Actually, I’m not a professional developer either, but that is beside the point.

I may not be a designer, but I do want to create great looking websites. Fortunately, there are a lot of hard working and generous designers out there that have done the work to create numerous attractive, responsive, and free templates for general use. These free templates can be found with a quick Google search. Some of the resources I found include:

This list is in no way comprehensive. Also, I can’t guarantee that the conversion and adaptation process I follow in this post will work for every theme. In fact, I can pretty much guarantee that it won’t. There is just too much variation in how different designers do their work. That variation requires flexible application of the steps and concepts contained in this post.

I anticipate several hours of dead-ends, and frustration as part of the conversion process. However, achieving the goal of applying one of these beautiful themes to a React single page application will be worth the inevitable pain I’ll encounter in the process. I am sure that the conversion process will take less time than if I thought of the design myself.

This article assumes a familiarity with CSS, HTML, and React; including how to make React components and project structure. The files for this project are available at the part_1 branch of this GitHub repo.

Initial Design

To get started, I’ll be following velocity360’s two part video series converting existing themes to React (part 1 and part 2).

The subject of velocity360’s first video is selecting a theme. I chose minimalist and visually appealing Multiverse theme from html5up.net by AJ

Multiverse Theme standard page on left, focused on clicked image on right

The second video goes in the process of converting the theme to React.

One difference between those videos and this post is my use of create-react-app to bootstrap my project. Using create-react-app results in a few differences thanks to webpack and babel integration. However, it put me on a “best path” for development and kept me from having to build a local development environment from scratch.

Implementation

As previously stated, I will be following the steps in the video as closely as I can, and I will point out the things I did differently in order to successfully incorporate create-react-app.

One of the differences is encountered almost immediately. Directly copying the script tags for the linked JavaScript files exactly as instructed in part 2 of velocity360’s videos did not work correctly and resulted in the following error

Fortunately, this can be fixed easily by assigning a type=”text/babel” to the script source like so:

<script type=”text/babel” src=”/assets/js/jquery.min.js”></script>

According to Rafael Quintanilha in this stackoverflow post the text/babel mime type tells the “… Babel library that you want to transpile that script into pure JavaScript”. It seems as if Babel reads the file as something other than JavaScript without the type information.

Next, I copied all the HTML (except the script links) between the <body> tags of the index.html file that came with the theme and used it to replace the JSX in the return block of the App.js file. This was exactly as shown starting from the 5:00 min point in velocity360’s 2nd video, 2. Using Themes with React — Converting to Components. I then followed his same steps in cleaning up the HTML and create valid JSX. This step resulted in the following webpage:

HTML is here, but that’s all

Then, I was able to get the styling working by changing the way I was incorporating the CSS file into the project. Instead of linking to the CSS in the index.html file as shown in the video, I imported it in App.js. I just replaced the boilerplate import ‘./App.css’; statement with import ‘./assets/css/main.css’; to import the CSS file from the copy of Multiverse that I copied into my project (as directed by by velocity360). Performing these steps resulted in the following:

CSS Works Now

This was a promising sight. I then needed to get the images to display. I could individually import the pictures into my App.js file, but there’s an easier way to incorporate them. Based on the create-react-app usage guide, this is a perfect use case for the public folder that create-react-app creates. So I just moved my entire images directory to the public folder which resulted in this:

Now With Images

The images threw me off initially since I was expecting the same images from the Multiverse demo page. However, this is what was in the images directory, so no big deal.

I then decided to componetize something. The repeated image blocks seemed perfect for turning into a component. I created a folder called Components to contain this and future components, and a file called ImageItem.js to contain this particular component. I then copied one of the article blocks from App.js into ImageItem.js. The render function of the ImageItem component just returns a image like so:

const ImageItem = (props) => {
return(
<article className="thumb">
<img src="smiley.gif" alt="" />
</article>
)
}

Finally, I replaced all the articles in the App.js file with the ImageItem component to confirm that it worked.

Component Works

Now, its no fun to have the same image in all the blocks. Additionally, the reason I wanted to use React for this project in the first place was to display dynamic data. So, lets get some dynamic data and display it.

The Cat API has an easy to use way to get multiple images. So I added the following code to the App.js file to pull down some images from their API.

componentWillMount() {
let that = this;
fetch(`http://thecatapi.com/api/images/get? format=xml&results_per_page=20`, {
method: 'GET',
})
.then((response) => {
return response.text();
})
.then((response) => {
parseString(response, (err, response) => {
if (err) {
return;
}
else {
that.setState({ cats: response.response.data["0"].images["0"].image})
return;
}
})
});
}

And I altered my render function to create an ImageItem for each cat image like so:

<div id="main">
{this.state.cats.map((cat, index) => (
<ImageItem
key={index}
src={cat.url[0]}
source_url={cat.source_url[0]}
/>
))}
</div>

Finally, I changed the ImageItem component to render based on the props passed to it like this:

const ImageItem = (props) => {
return(
<article className="thumb">
<a href={props.src} className="image"><img src={props.src} alt="" /></a>
<h2>{props.source_url}</h2>
</article>
)
}

This results in multiple images that being displayed.

We Have Cats!

Conclusion

This technique for converting an HTML template provided a good starting point. It fulfilled the goal of incorporating an attractively designed them and using it in a React application.

Project Progression

However, there is still a lot of polish missing. There are no animations, no transitions, several user interface items are missing as well as user experience behaviors. In the next article, I’ll use React specific modules to replicate those behaviors and replace some of the linked JavaScript libraries.

Reginald Johnson has maintained his passion for coding throughout his 20+ year career as an Officer in the United States Navy. He enjoys applying his training and experience in programming, Systems Engineering, and Operational Planning towards programming. Follow him Twitter @reginald3.