CODEWITHSUNDEEP
htmlreactjs
Arparas
Arparas

Reputation: 113

How to link React.js file to html

I just installed this Create React Apps program from here https://github.com/facebookincubator/create-react-app and I have all the files downloaded and I am able to edit the App.js file, but I already have made some html files for a website, I want to know how to link the App.js file to my current files. The html on the given Index.html, shows no <script> element used. Here is the full html code: 

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#000000">
<!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
-->
<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`.
-->
  </body>
 </html>

Upvotes: 0

Views: 9607

Answers (2)

julian libor
julian libor

Reputation: 1701

Inside your project run

npm run build

This create the folder "/build" with the "index.html" file. Inside this you can see how all this magic is done. You can put your other/old stuff also there.

Upvotes: 2

Max Millington
Max Millington

Reputation: 4498

I'm not entirely sure what you are asking, but you can have normal html/css on the same page as React. React is rendering the App component in the div id="root" section of the page. Elsewhere, you can just paste your old html stuff and it should work.

Upvotes: 0

Related Questions