How is the JavaScript file attached to the HTML in React?

Question

I recently stumbled over this question in an interview. I can't seem to find too much about it online.

Q: How is the index.js file attached to the HTML file in React?

I have to be honest, I'm not clear on this. Here is the head of the index.html file of a standard create-react-app. I don't see any links for JS or CSS:

<!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">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>My App</title>
  </head>

I just want to make sure I understand how everything is working under the hood. Apologies for the semi-basic question.

anyways, it's a webpack plugin that does it. it's not specific to react, but specific to the way create-react-app uses webpack — azium
– azium, Commented Apr 23, 2018 at 14:20
We attach it as a bundle js file in the <body> tag in my project <body> <div id="root"></div> <script src="/js/client.js"></script> </body> — HRK44
– HRK44, Commented Apr 23, 2018 at 14:21
I know that <div id="root"></div> is where the React app gets injected. But in standard HTML you need to actually link the files. I don't see the link — J Seabolt
– J Seabolt, Commented Apr 23, 2018 at 14:21
Possible duplicate of Create React App index.html and index.js connection — Sulthan
– Sulthan, Commented Apr 23, 2018 at 14:33

Parth Patel · Accepted Answer · 2018-04-23 14:21:41Z

3

https://stackoverflow.com/a/42440000/9264167

This might help you to know better about what is happening behind the scene.

answered Apr 23, 2018 at 14:21

Parth Patel

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Parav01d · Accepted Answer · 2018-04-23 14:22:35Z

1

What you see is only the template used by webpack. Take a look at your webpack.config.js and you will find the used plugin, which is responsible for creating css and javascript bundles.

answered Apr 23, 2018 at 14:22

Parav01d

3182 silver badges5 bronze badges

Collectives™ on Stack Overflow

How is the JavaScript file attached to the HTML in React?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related