How to convert a html template to react?

reactjs mern
Ninja picture Ninja · Nov 18, 2017 · Viewed 34.9k times · Source

I have purchased an HTML admin template from themeforest (https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?s_rank=1).

I am building a MERN stack site, and wondering what would be the best way to convert this HTML template to a react site. Breaking down the template to components, adding routes manually, and converting HTML to JSX etc seems to be a tedious task.

The question arises because in themeforest, the most popular admin templates were built for a jQuery / HTML world, not for a full stack JS world. For example, the theme that I've linked above has ~7000 downloads. These templates upon purchase give you a whole bunch of HTML and CSS, and if we have to build a react site out of these, then manually converting the HTML to JSX, and breaking it down to componenets, is a laborious process. Wondering if there's a better approach to solving this problem.

Answer

Mritunjay Upadhyay picture Mritunjay Upadhyay · Oct 22, 2018

You can use html-to-react-components

A better approach would be converted your html to jsx and use in your react-component. You can converted your html to jsx here.

Related questions

MERN Stack - Express and React on same port?

I'm working on a project with the MERN (MongoDB, Express, React, Node) stack and I'm having issues when posting data from a form within a React component to an API endpoint defined in Node.js. When I submit the form …

Read More
How to deploy MERN stack to a hosting service?

I am new to web development and I have a hosting service on which I want to deploy my reactjs/node project. To deploy it previously, I had been simply uploading the build folder created from running npm run build. …

Read More
Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More