Can I run index.html with React without npm start and npx create-react-app?-CodePudding

I am self-learning react and I am just confused about a lot of things.

I thought that if I add React to my index.html via a script like the below:-

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bill Details</title>

</head>

<body>
    <div id="billTable"></div>
    <script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>

</html>

and this is my js file where I am trying to return react component

//BillTable.js
import React from "react";
import ReactDOM from "react-dom";

function BillTable() {
    return <h1>HELLO TABLE</h1>;
}

ReactDOM.render(<BillTable/>, document.getElementById("billTable"));

when I try to open index.html directly in firefox or through express server I get the below error in console:-

Uncaught SyntaxError: import declarations may only appear at top level of a module.

I then got rid of this error by changing the script type in problem line 1 in index.html to

<script src="BillTable.js" type="text/babel"></script>

but then also my webpage is completely blank and even console is not showing any errors.

Please suggest how to solve this issue. I am right now trying to learn React with functional approach only, so if any changes are required to be done on the react side, please make them in the functional approach.

CodePudding user response：

I don't think you have included the correct packages to handle React components and JSX yet. These packages react, react-dom, etc. are usually in a package.json and are required to tell the browser what tools will be used to run the code. These packages handle the "script" or components you create and places the elements constructed in your components to the DOM. You can solve this by loading react with additional script tags before your component's script tag. This will let the browser know how and what to use to run your react component. Also, in your function, it does not know that it is a React Component. Check out an explanation for why you would have to use React.createElement I have attached an example of using only an index.html page here: example of using an index.html page Your Component file:

"use strict";

function BillTable() {
  return React.createElement("h1", "", "HELLO TABLE");
}

const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));

and your index.html:

<body>
    <div id="billTable"></div>
    <!-- Load your React packages -->
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>

    <!-- Load your React component. -->
    <script src="BillTable.js"></script>
  </body>