DEV Community

Menard Maranan
Menard Maranan

Posted on • Updated on

Converting static HTML/CSS site to React App

Quick Note: We only focus on the simpler use case here πŸ˜‰
Thanks for the responses πŸ™‚

Converting a static page or site into React App can be simpler than what some might think, that is, depending on the complexity of your site. The gist is that you'll only restructure and format things out. Just plug the data to it, or with an API to make it Dynamic or feel more like an App.

In this quick blog, I'll be going through the simple steps on how to convert a static page into a React App.

Prerequisite

This assumes you already have React installed into your machine, and of course, you know the gist of the library.

So before we start the conversion, let's do a simple create-react-app to initialize our project. I'll be using npx here:

npx create-react-app My_App
# wait for it to finish...

cd My_App # or code My_App if you have VS code
Enter fullscreen mode Exit fullscreen mode

Remove the unnecessary files and the boilerplate code. Now we're ready to go.

Conversion

Turn page/s into Parent Components

If you only have one page, you can create a folder called components under the src folder. Then, create a single .jsx file there like index.jsx. Create a React Component within index.jsx, then copy and paste the body of your static HTML file to the return statement of that Component.

And if you have multiple pages, I recommend creating a separate pages folder under src folder and create .js file for each (HTML) page of your static site. Again, create React components for each file (or page) and copy-paste the body of the HTML files into the react components.

Fix Syntax

The next thing we'll be doing is correct the syntax of our plain HTML code into JSX. More specifically, change the following:

  • change class to className
  • change style props from string to objects, and change the BBQ-casing of CSS props to camelCase (i.e. style="text-align: center;" to style={textAlign: 'center'}).
  • End the self-closing tags (i.e. <img> to <img />, or <br> to <br />.

Add CSS

Now, it's time to add your CSS to the components. Create a styles folder under src folder, and drop there all your CSS files. Then, import the corresponding CSS for each pages (if applicable).

Dependencies

Installing the dependencies of your page (i.e. Bootstrap, Font-Awesome, etc.) that was recently delivered via CDN is recommended to be installed via npm or yarn (if there's any). Try to find the corresponding React module for your component and install them within your React App:

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
Enter fullscreen mode Exit fullscreen mode

Then, import them to their corresponding components/pages.

Decompose Page/s

This is the part where we truly take advantage of React, which is by breaking down each page into smaller, reusable components.

For this step, create a components folder if you haven't yet. If your website is written with Semantics in mind, then the conversion would be a breeze.

Understand the structure of your pages. Think about what sections makes up a page, what smaller components or sub components builds up which area of the page.

An example would be:

    <main>
       <h1>Welcome to Homepage!</h1>
       <article>
           <header>
              <h1>Headline 1</h1>
              <p>
                  Lorem Ipsum dolor...
              </p>
           </header>
           <section>
               <p>
                  Lorem ipsum dolor sit amet...
               </p>
           </section>
           <section>
               <p>
                  Lorem ipsum dolor sit amet...
               </p>
           </section>
           <section>
               <p>
                  Lorem ipsum dolor sit amet...
               </p>
           </section>
           ...
       </article>
       <article>
           <header>
               ...
    </main>
Enter fullscreen mode Exit fullscreen mode

From there, we can clearly see the repeated pattern of:

<section>
    <p>
        Lorem ipsum dolor sit amet...
    </p>
</section>
Enter fullscreen mode Exit fullscreen mode

We can turn that out into a component and prevent ourselves from repeatedly writing them:

// src/components/Section.jsx
export default function Section({ data }) {
    return (
           <section>
               <p>
                  {data}
               </p>
           </section>
    )
}
Enter fullscreen mode Exit fullscreen mode

That's one, but we can further group this page into hierarchy. Let's get through each of those:

First off, notice that we also have the header? That's also another component:

// src/components/Header.jsx
export default function Header({ headline, description }) {
    return (
           <header>
              <h1>{headline}</h1>
              <p>
                  {description}
              </p>
           </header>
    )
}
Enter fullscreen mode Exit fullscreen mode

And now, by looking on our HTML hierarchy, the parent component where we will put the Header and and Section components will be the Article, so let's import those components we just created and nest them inside the Article component:

// src/components/Article.jsx

// assuming that we have a data source
// for the contents of the page
import Header from './Header'
import Section from './Section'

export default function Article(props) {
    const { headline, description, sections } = props;
    return (
        <article>
            <Header
                headline={headline}
                description={description}
            />
            {
                sections.map(section => (
                    <Section data={section} />)
                )
            }
        </article>
    )
}
Enter fullscreen mode Exit fullscreen mode

Now we're cooking!

Alright, for the last restructuring, noticed that on our static HTML, there are more Article tags with similar structure that follows? Guess what, we can also do the same thing here:

// src/pages/Main.js

import Article from '../components/Article.jsx'

export default function Main() {
    const someData = ...
    return (
        <main>
            <h1>Welcome to Homepage!</h1>
            {
                someData.map(data => {
                    const { headline, description, sections } = data
                    return (
                        <Article
                            headline={headline}
                            description={description}
                            sections={sections}
                        />
                    )
                })
            }
        </main>
    )
}
Enter fullscreen mode Exit fullscreen mode

But wait, have you noticed a common problem that occurs on React App? If you're an Eagle-eyed reader, then yes, we committed prop-drilling here. We can use Redux or just simply the Context API, but that's another topic for another blog, so bear with me for now.

Ok, just take note that the Main component we just created is saved under the pages folder as it's actually representing an entire page already in itself.

Routing

This step is optional (only if you have multiple pages), and we can leverage React Router so that we don't need to refresh the page.

You can install react-router-dom via npm or yarn and start routing from App.js which is in the top level of inside the src folder.

Final thoughts

React is an awesome way to build apps, but if you already have a static site and you want to convert it to React, and wondering if it's possible, well, yes, there's a workaround.

Anyway, I hope you found this blog helpful and till' next time, see ya'!

Follow me on Twitter

Top comments (16)

Collapse
 
yodasoda profile image
Jan Claasen • Edited

Great post for learning but I wouldn't recommend doing this from a practical perspective. You'll need a good reason why you would want to have your static site converted. I am really struggling to think of enough reasons to do this. And in most cases a simple templating language alongside of something like jekyll/hugo/11ty would be a way better solution.

Collapse
 
oenonono profile image
Junk

Great question. Unless there's a reason to need React, all this will do is make the site perform worse without adding any value.

Collapse
 
menard_codes profile image
Menard Maranan

Thanks for the response! I also am thinking of the same thing, just there are some who have requested me in the past to do this, maybe they have a better reason, so yeah, I answered the demand πŸ˜…

Collapse
 
yodasoda profile image
Jan Claasen

As my friends at Jurassic park said: "they were more preoccupied with whether they could, they didn't stop to think if they should."

Collapse
 
creativemacmac profile image
creativemacmac

This is SO useful❀️thanks a milπŸ’ͺπŸ™‚ i have a gazillion tailwind liberaries and some only have html available and i get it wrong sooooo many times when converting to react... I have noticed that react doesnt seem to like html section tag...am i right or am i Just paranoid? πŸ™‚

Collapse
 
menard_codes profile image
Menard Maranan

I'm glad you found this helpful😊, appreciate it much!
Btw, I don't think you're alone with that, JSX can be a pain at timesπŸ˜…

Collapse
 
creativemacmac profile image
creativemacmac

I am glad to hear that i am not the only person finding converting from html to jsx hard because i create some massive bugs and my buggy brain doesnt help much πŸ˜†πŸ˜‚

Thread Thread
 
menard_codes profile image
Menard Maranan

πŸ˜‚πŸ˜‚

Collapse
 
akash_stha01 profile image
akash shrestha

svelte is useful

Collapse
 
aalphaindia profile image
Pawan Pawar

Good one!

Collapse
 
manasak98 profile image
manasak98

Hey, Pawan very useful post on drupal.
BTW I am just 3 months old to drupal.
So I am facing issue... Like I want to create configuration form in drupal 7.
Do you know how to do that?
Please help me out of you know.
Thank you.

Collapse
 
aalphaindia profile image
Pawan Pawar

Please contact us at contact@aalpha.net

Thread Thread
 
manasak98 profile image
manasak98

i just mailed to this my query.can you please check that out.

Collapse
 
arvindpdmn profile image
Arvind Padmanabhan

BTW, sometimes static sites are just what you need: devopedia.org/static-site-generators

Collapse
 
menard_codes profile image
Menard Maranan • Edited

Yes, and it's especially preferable the speed of static sites. But I think those who might need this conversion have their reasons, like they want to migrate their site to React maybe for more client facing app and less involvement of the backend or whatever. I heared some folks just adheres to client's needs to convert their site to React, and idk from them.
Anyway, thanks for an awesome responseπŸ˜‰

Collapse
 
menard_codes profile image
Menard Maranan

LOL! I agree, especially if the site is more complex. This is just the simplest example I came up with πŸ˜…