There’s no Harm in Slowly Migrating to React.js (Start ASAP)

For this reason, it’s always a good time to start folding your static HTML / CSS / JS webpages into a React.js web app

Image by Alvaro Felipe on ed.team

I’m not the first to admit it — I should have migrated my HTML / CSS / JS / jQuery site to React.js a long time ago. On the verge of 2021, the reasons are clear; React allows for better organization, truly reusable components, powerful routing, Server-Side Rendering (SSR), Static Site Generation (SSG), modern web features, and more.

Still, it definitely wasn’t my first thought to jump ship to React. As my site grew in complexity and scale, manually editing dozens of .html files became inconvenient, but the thought of learning a new framework was more daunting. According to computer science proverbs, if it ain’t broken, why fix it, right?

Wrong. In fact there is hardly any consequence to migrating your website to React.js incrementally, at your own pace.

Step 1: Create your React Web App

At this point, you‘re probably worried about how to set up your site in the first place. Luckily, the work is done for us, thanks to create-react-app!

Note: feel free to use Next.js for SSR, or Gatsby.js for SSG

On your machine, initialize your React project with

npx create-react-app your-website

This will populate a directory your-website with all the resources you need to get up and running. Voila!

your-website
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    └── logo.svg

Notice that two directories are created: /src and /public.

/src is the main home of the React app itself. Here, you will write components, assemble pages, configure routers, etc.

/public is the home of all static content. This means images, sitemaps, your robots.txt and manifest.json files (as visualized), and you guessed it — static standalone webpages.

Step 2: Integrate Your Existing Webpages

Now that we’ve established /public to be the parent directory to our current static website, let’s drop in those files and directories.

Imagine I have 3 webpages: about, shop, and contact. Each is a directory that contains .html, .css, and .js files. I also have a background image, sitemap, and terms and conditions document.

Dropping these files into the public folder leads to the following structure:

your-website
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── about
│   │   ├── functions.js
│   │   ├── index.html
│   │   └── styles.css
│   ├── background.jpg
│   ├── contact
│   │   ├── functions.js
│   │   ├── index.html
│   │   └── styles.css
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   ├── shop
│   │   ├── functions.js
│   │   ├── index.html
│   │   └── styles.css
│   ├── sitemap.xml
│   └── terms.pdf
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js

Note: Remember to link any static files from inside the root index.html file, if applicable.

Step 3: Verify your Static Routes in the Browser

On your machine, start serving the web app over localhost with

npm run start

This should take you to this interface:

Resulting webpage after the command npm run start

This is your homepage. Remember the static index.html file create-react-app generated for you? That’s what you’re seeing! When your React app is built, its components will populate that index.html file, bringing the boilerplate to life.

To test your static routes, visit them through the browser’s url bar.

Remarkable! The urls localhost:3000/about, localhost:3000/shop, and localhost:3000/contact all appear and act as they did before.

This is crucial to your migration because the static standalone webpages you provided do not affect the React app itself. In other words, both styles of web development can coexist on the same domain.

Furthermore, the timeline of your site’s migration is entirely up to you. As you begin to learn more about React.js with time, you can slowly morph these .html files into React components using tag-based JSX. On the other hand, you can choose to never bother with migrating the static webpages, and simply start publishing your future pages with React. The choice is all yours!

That Sounds Great, but What’s the Catch?

I knew this process sounded too good to be true. All described above is accurate, but there is one potential pitfall: Your root webpage (www.your-website.com/) needs to be built with React.

Still, it’s not the end of the world; for most cases, this only requires changing the placeholder code in src/App.js to fit your needs. React has incredible documentation, and the web is an infinite hive of tutorials, blog posts, and other resources.

Put simply, since you’ve already committed to learning and using React.js, building your homepage with it should not stand in your way.

Conclusion

Is migrating your static HTML / CSS / JS / jQuery page to React.js a flawless process? Not entirely.

Should you still undergo the migration as soon as possible? Absolutely.

Static web development is an acceptable practice… for now. As web technologies evolve, you’re going to want your framework to keep up. For those reasons, migrating to React.js is the obvious choice.

Your static webpages are only a short term solution; slowly moving your codebase to a modern framework at your own pace will help future-proof your web application for the next ten years, with no sweat or tears involved.