Converting static HTML/CSS site to React App
Tags: html, css, react, webdev
Published: 2021-08-11 01:11:25

> **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:

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

cd My_App # or code My_App if you have VS code
```

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:

```bash
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
```

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:
```html
    <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>
```

From there, we can clearly see the repeated pattern of:
```html
<section>
    <p>
        Lorem ipsum dolor sit amet...
    </p>
</section>
```

We can turn that out into a component and prevent ourselves from repeatedly writing them:
```jsx
// src/components/Section.jsx
export default function Section({ data }) {
    return (
           <section>
               <p>
                  {data}
               </p>
           </section>
    )
}
```

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:
```jsx
// src/components/Header.jsx
export default function Header({ headline, description }) {
    return (
           <header>
              <h1>{headline}</h1>
              <p>
                  {description}
              </p>
           </header>
    )
}
```

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:
```jsx
// 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>
    )
}
```

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:

```jsx
// 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>
    )
}
```

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](https://twitter.com/menard_codes)**