score:1
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.
Source: stackoverflow.com
Related Query
- How do I find the React DOM node that represents its actual html element?
- How react-dom identify the correct HTML file?
- How to apply CSS style to HTML file that is inside the public folder of React JS
- How to push the correct counter value to an HTML element in React using a loop?
- How to replace a set of html elements in place of a child element within the DOM rendered by React component within same component
- how to make a dynamic text show the correct sentence in react when deleting a component (custom html element)
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- How can I render HTML from another file in a React component?
- How to allow input type=file to select the same file in react component
- React: How much can I manipulate the DOM React has rendered?
- How to solve Warning: React does not recognize the X prop on a DOM element
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- how to check the actual DOM node using react enzyme
- How to access the file system in react native?
- How do I display the content of React Quill without the html markup?
- how to import HTML file into React component and use it as a component?
- How to avoid re-rendering the whole List instead of adding the new item to the DOM list in react JS?
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- How do I sync state from the DOM to my React Component in an Isomorphic Application?
- How do you dynamically insert a React component into the DOM (for instance a dialog)?
- How to open a text file and read the contents from it on react native?
- How can I match if the current route matches a pattern in React Router Dom v6?
- react js how to import only the required function from a file and not the all functions
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- React how to connect JS file with HTML file
- How to add a html element next to the cursor in contentEditable div. React Js
- How to hide an the HTML element if a JSON key doesn't exist in React
- React router dom - Link. How can I put an ID into the path of Link
- With React Router, how can I assign a class to the HTML element?
- How to download the file from server location in react Js
More Query from same tag
- Invariant Violation error when returning a Link as dataFormatter in react
- React this.onChange() is not calling inside map function
- How to pass two arguments to an onchange handler in a select tag?
- How to focus a button in a details list using React and Office Fabric
- React Context not working with server side rendering
- Adding a dynamic link
- How to change the react state in testing
- Starter "Hello World" React Project Gives Empty Page
- How to create an animated counter in React.js?
- Expected to return a value in arrow function - useEffect
- Not able to pass index through to child component in react.js
- How can I check for a value in a conditional array?
- React Router with Material UI doesn't render the component
- How to pass a props from one screen to another and display it?
- React routing always loads the same component
- Unable to render a component based off function
- ReactJS object filter get undefined on componentDidMount
- React Redux how to store http response in Reducer
- How to implement open curtain animation
- why Form.useForm did not load the Component in react
- Testing navigate of reach router with react-testing library
- Using leaflet.offline with React?
- How to list data based on the selected option using react and typescript?
- socket.io-client and useEffect not getting updated react hook
- How to delete data from table in reactjs?
- page numbers being shown in the first page
- REACTJS .join() not working in app.js but working in other .js components ERROR:TypeError: Cannot read property 'join' of undefined
- Creating show and hide sections with buttons in reactjs
- Changing state of one component from another component in another file
- React component doesn't update