From HTML to React Part 1

This article was originally published at codebushi.com

Several months ago, I started writing a "book" about making websites with Gatsby.js. It has become obvious to me that I will probably never finish this book, due to several personal reasons (loss of interest, having a toddler is hard, burnout from coding in general, I got a shiny PS5 during the holidays).

Since there's already some content written, I figured it's better to share what I've got so far. Who knows, maybe I'll find the will to finish this some day. Maybe I'll use Next.js instead of Gatsby, since it seems to be a trend I'm more interested in. Anyhow, here is Part 1 of the book!

Introduction

Hello and welcome to From HTML To React! In this book, you'll learn how to take an ordinary HTML and CSS website and transform it into a modern React,js site, using Gatsby.js. The goal of this book is to help you learn and practice modern web development skills with a JavaScript framework. By the end you'll have a published Gatsby site, written in React, that's blazing fast.

Why Gatsby?

Gatsby is a modern web framework based on React. The key word here is React, which has become the most popular JavaScript library around. Today there are tons of HTML/CSS/Bootstrap templates on the web, but they're still powered by jQuery. Now I won't say that jQuery is outdated, but I will say that it's not as desirable of a skill than React. Working with Gatsby is, in turn, working and practicing with React. This book will take the familiar concepts of a simple HTML website and translate them into React principals and best practices.

Who Is This Book For?

This book is not recommended for absolute beginners of web development or React. It's aimed towards the beginner/intermediate web developer who wants to take their skills to the next level. Someone who is comfortable working with HTML, CSS, and jQuery, but is trying to break into the world of React.

This book also assumes you have a basic understanding of React. Subjects such as JSX, state, props, and components. If you are not familiar with the basics of React, I encourage you to go through the official React documentation.

The goal of this book is to reinforce and build upon the basics of React, by practicing with the familiar elements of a simple website.

The Steps Involved

First, we'll pick out a free HTML template to use with our project. We'll analyze the existing code and discuss which parts we'll be using for our new site. Spoiler alert, we won't be using any of the jQuery!

We will then spin up a brand new Gatsby site and go over the basics of how it works. We'll import the existing CSS from our HTML template and organize the folder structure to begin building.

In order to get in the habit of creating components, we take our existing HTML code and break it up, converting what we use into JSX and React components. The focus here is to get the new Gatsby site looking like the old site, without any of the old jQuery functionality.

Finally we'll start to add back the functionality, but we'll be using React and React packages instead of jQuery plugins. Once we have everything working we will build and publish the site.

Tools You Will Need

• Node.js and NPM installed on your machine
• The Gatsby CLI installed on your machine
• A GitHub account for your code and publishing

Chapter 1: The HTML Template

There are many places to get HTML and CSS templates online. One of my favorite sites to get inspiration and design ideas is onepagelove.com, started by @robhope . They have a nice gallery of one page websites as well as design resources and web development articles.

For our purposes, I'm going to pick a free to use HTML template so we all have a similar starting point. Head over to https://www.free-css.com/free-css-templates/page257/evolo and download the free 'Evolo' template if you wish to follow along.

You can also choose a different template or use one that you've made in the past, the principals are pretty universal.

Template Code Analysis

Open up the downloaded files and check out the index.html. Since this is a one page website, all the HTML lives here. The file is broken up nicely for us into sections, such as <!-- Navigation --> and <!-- Header -->. These are actually perfect chunks we can extract into their own React components later.

At the very bottom of the file, we can see this is where all the JavaScript and jQuery is loaded.

<!-- Scripts -->
<script  src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script  src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
<script  src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script  src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script  src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script  src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script  src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
<script  src="js/scripts.js"></script> <!-- Custom scripts -->

We won't be using any of these files, but we should make a note of what functionality they provide. React is popular enough to have its own version of most jQuery plugins, and we can recreate any leftover functionality.

Open up the /css folder and take a look at the CSS files. Again, we won't be using any of the CSS that's associated with the jQuery plugins. We also won't be using the fontawesome-all.css since there are React specific Font Awesome packages available. The only files we'll need are:

bootstrap.css
styles.css

Now that we've identified what parts of the template to use, the next step is to start our Gatsby site.