I would like to understand how browsers handle JavaScript once bundled with Webpack for example. In my understanding of the thing, is transmitted to the browser JavaScript code understandable by the browser, after transpilation of the React code with Babel and bundle of the different parts of an application, which means that there is no more code related to the React library right? And yet it is still possible to benefit from the functionalities for which React is used, but then where does React sit, how does the exchange with the browser happen? Is the React library somehow included in the bundled code?

I can imagine a scenario like this:

• code including transpiled React code, is bundled on the server that hosts it
• when page is requested by a user, are received the different files of the bundle including the JavaScript code, including then the React features used in application
• the DOM is built
• the JavaScript is evaluated by the JavaScript engine of the browser, and the events are attached to the DOM
• when an event is triggered, the event executes the associated function
• and here I have no idea what can happen, how the state is updated since there is no more code like "const [state, setState] = useState()", I just know that the DOM is virtually rebuilt to be compared etc... Is it a transpiled version "const [state, setState] = useState()"?

edit:

import {useState} from 'react';
const [state, setState] = useState();

I just tested this code and on Babel'site and it gives:

"use strict";

var _react = require("react");

const [state, setState] = (0, _react.useState)();

Does this mean that React is included in the bundle? If yes, how are the imports done by the browser (I've heard about module loaders but I have no idea if that's what it is, a search on the web doesn't give me any result)?

Thanks in advance for your answers