Converting Templates to React Project

Many times we might have thought of something wonderful but not able to build or create it. This is the case with most of Backend Developers/ UI Developers when they want to build a beautiful UX design.

As an engineer who is working on backend designs / code or who is A UI engineer, designing the UX might not be your strong suit. To kick start we might look up on ideas and HTML templates available online and mimic the design. But it’s not that easy ? Is it. Breaking up the html template into a framework specific guideline always seems to be difficult.

Today I am going to demonstrate how can you convert any HTML template into a React Project, divide them up in component and make it a dynamic website. This would help you kick start on your full stack project and help you put together your ideas and code into visualization.

To get started, let’s understand what is React

React is a Java script Library for building user interface. Integrating react with redux (a container for JS apps), you can achieve a standalone User Interface Project and deploy that anywhere.
Read More about React visit the official website. For Redux click here

Let’s download node.js first to build our react application — Download Here

Once the installation is successful (Node >= 10.16 and npm >= 5.6), you can open up a terminal and create a new react Project with typescript template

npx create-react-app myreactproject — template typescript

Creating new react app (the command has 2 hyphens before template)

Now Add some base packages, you can use yarn (react guidelines) or npm which ever you like

npm add typescript @types/node @types/react @types/react-dom @types/jest @types/react-router @types/react-router-dom

npm install some base react packages (Might take a while)

Now let’s check out and clean our project and create a base component folder.

Use Visual Studio code, you can open it by typing ‘code .’ in the terminal. Clean up the project by making the following changes

Create folder: components/app inside src
Move: App.tsx into components/app

delete: public/robots.txt
delete: src/App.css
delete: src/App.test.tsx
delete: src/index.css
delete: src/logo.svg
modified: public/index.html — Remove Logo references
delete: public/logo192.png
delete: public/logo512.png
deleted: src/setupTests.ts
deleted: yarn.lock

Remove the reference of index.css and logo.svg from App.tsx. Completely clean the project with no demo data. The Project looks like this

Do test the application once before getting started.

Run the project using ‘npm start’

This is how it looks like

This should launch your application to localhost:3000 (default)

Now that we are done with base react project start, let get some template which we want to convert to react to React Project. You can search and download your own template. For demonstration I will let download the below mentioned template

iPortfolio - Bootstrap Portfolio Websites Template

Once you download any template, the first thing to do is to identify the components sections which you would create to convert this to react project

Breaking a template into Components

As you can see we need to break and identify the components in a html template. In our case they will be

Based on Side Panel’s Navigation Menu Component Menu Item click, we would load different content in Main Content Component

Now let’s create the individual components in vscode. For creating component’s you need to create a folder with component name, create a component file(.tsx) and an index.tsx file, as per the folder structure. In this case it should look something like this.

Currently All files are empty. We have just created a folder structure.

Now we need to move each section carefully into the related component. Open up the index.html from the temple and start copying sections into respective .component.tsx file

While copying we need to take care of 2 things.

1. We will create functional components inside .componet.tsx file and inside the return we would populate the copied html
2. we would need to close each open html element. Example <img> would work in html but in react would throw error, hence you need to close this as <img />
3. class would be replaced by className as per react standards. So when you copy html content into react component, replace the keyword class with className
4. All inline style should be created as a class and kept in public/custom.css and you can then import this custom.css in index.html under public
5. Copy all static content like images, script, css under public folder inside react project

6. Modify the index.html inside public folder with the index.html from the template. This is how the current index.html from public folder looks like

Before capture of index.html

While doing this step keep in mind

a. After copying replace the entire body section with

<body>
<div id=”root”></div>
</body>

b. Ensure your html header has a link to manifest. This is required by react

<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />

c. If you have any scripts under body section, you can keep it there or move to header section.

After capture of index.html

Now the section <div id=”root”> </div> is controlled by react, and replaces only the content which is updated

React updating root element with App Component

Now that we have populated the index.html file, moved all the assets/css/js and images files to public folder, the only job to do is to move the content per section to related component. This might take a while. Start with the smallest and easiest component. In our case that would be footer component. For each component, you need to

1. Create an empty Functional Component and export it

2. Update the related index.tsx file to export this Component. You can directly export from the component.tsx itself, but as a good practice we export files via index.

3. Update the footer content into the footer.component.tsx ‘s return section

Remove the comment section while copying and replace ‘class’ by className in the component file. Once moved keep a placeholder under the originalFile to keep track of what you have moved

Like this, we need to move all components one by one into their respective components. Proceed with this or have a reference to the project link below in case you face an issue during this step.

Let’s take one more example. We would now move the side bar panel and create router to sub components, so that on click of an element, the particular section is loaded on the right hand side

Now lets create route for each page using Link attribute

Now that we have created routes, we can map different component to these routes using a simple switch in the main Layout component. Before moving to this step ensure you have created all seperate components.

While combining the components to parent, now you can reference the child components created directly

Routers Can be created based on what you want to display on click of elements

One optimization that needs to be done in the above code is to seperate the common code out. Example Remove the sidepanel outside and keep the tag <main id=”main”> outside the switch. I leave that to you guys

Once you have completed this intergration, Tadaaa, you are ready to go, just fire up npm start

The entire webpage is now a react project. You can further modularize this project into smaller components. Note that when a component is reloaded only that part of dom is refreshed and hence if you feel a section may change more frequent that another, then you must create them in different components.

I hope you had fun and would find this useful. You can find the source code to this Project here.

https://github.com/5-k/HtmlToReactApplication

If you like my content, do support or buy me a coffee :p

https://www.buymeacoffee.com/PskV9Rt