Integrate any HTML Template into React Application || DN-SPACE

React Js

Integrate any HTML Template into React Application

Check Create App Version

create-react-app –version


Create New App


create-react-app collegenotice







Download any responsive templete 

This is Template Folder

My Application Folder is

Open the src Folder and Remove Unwanted Files

App.test.js

index.css

App.css

logo.SVG

reportWebVitals.js

setupTests.js

Now clean your app.js & index.js page

app.js

function App() {

return (

<div className="App">

I am Dipankar

</div>

);

}

export default App;

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

After Remove unwanted Files see the result where I type some text

Now ready to Integrate our template

1. Create a folder under the src folder

My folder name is web

2. Create another folder under public -> assets

3. Creare your home page src->web->Home.js

import React from 'react';

const Home = () => {

 return(

 <>

 This is My new Home Page

 </>

 )

}

export default Home;

4. Call Your Home page from App.js

import Home from "./web/Home";

function App() {

return (

<div className="App">

<Home />

</div>

);

}

export default App;

5. Now Copy our template folders like CSS, JS, images, fonts, and uploads, and paste them under (Public -> asset -> CSS, js, images, fonts, uploads)

6. Copy the body part from your template - > index.html

and paste it into Home.js

import React from 'react';

const Home = () => {

 return(

 <>

 All Body Part

 </>

 )

}

Note : 

a.Remove All html comment tag <-- HHH -->

b. add a Closing tag into img input br hr etc

Example -- 

<img src=”image.png” />

<hr/>

<br/>

<input type=”text” />

c. Replace all class to className

d.

<div style="background-image:url('uploads/ben_img_2.jpg');"> Your content here </div>

To 

<div style={{ backgroundImage: "url('uploads/ben_img_2.jpg')" }}>

Your content here

</div>

6. Copy your CSS and JS links and paste into public -> asset -> imdex.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="theme-color" content="#000000" />

<meta

name="description"

content="Web site created using create-react-app"

/>

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<!--

manifest.json provides metadata when your web app is installed on a

user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

-->

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

<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">

 <!-- Bootstrap CSS -->

 <link rel="stylesheet" href="assets/css/bootstrap.min.css">

 <!-- Site CSS -->

 <link rel="stylesheet" href="asset/style.css"> 

 <!-- Responsive CSS -->

 <link rel="stylesheet" href="asset/css/responsive.css">

 <!-- Custom CSS -->

 <link rel="stylesheet" href="asset/css/custom.css">




<title>React App</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.




You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.




To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

-->




<script src="asset/js/all.js"></script>

 

 <script src="asset/js/main.js"></script>

 <script src="asset/js/custom.js"></script>

 <script src="asset/js/swiper.min.js"></script>

 <script src="asset/js/customdip.js"></script>

</body>

</html>

subscribe to our newsletter

Get the latest news and updates by signing up to our daily newsletter.We won't sell your email or spam you !

React Js