score:1

Accepted answer

if you will eject the app and check webpack.config file, you may spot this part:

plugins: [
      // generates an `index.html` file with the <script> injected.
      new htmlwebpackplugin(...)
    ]

so, simply webpack injects bundle script into the html page. if you'd work with react without create-react-app you will have to use script tag or write similar plugin by yourself.

also, you're looking into the source code. if you will serve the app and check inspector you will see the bundle in a script tag.

score:2

how the js file is connected to the html file?

this is a example of how react do

index.html:

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

index.js:

reactdom.render(<app/>, document.getelementbyid('root'))

app.js:

function app() {
  return (
    <div classname="app">
      hello react!
    </div>
  );
}

this's jsx, it will be translate to something else and create a dom in react, something like:

const app = document.createelement('div');
app.innertext= 'hello react!';

so, now you have a dom(app) which create in app.js, and you have a dom(root) query in index.js, reactdom.render(, rootdom) just do something like this:

rootdom.appendchild(app);

finally, your component(app) will display in root dom;

why a "script" tag is not necessary here?

because webpack do it for you, webpack will bundle you code into a javascript file and insert link to the index.html.


Related Query

More Query from same tag