Adding React to HTML (without create-react-app installation)-CodePudding

I'm trying to follow this official React Documentation on how to add React to a website.

In file main.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Add React in One Minute</title>
      </head>
    <body>
        <div id="root"></div>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <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 our React component. -->
        <script src = "states_clock.js"> </script>
    </body>
</html>

In file states_clock.js

// states_clock.js
'use strict';

const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

Both files are in the same folder. When I open the html page in chrome, I get the error message:

Uncaught SyntaxError: Unexpected token '<' (at states_clock.js:11:7)

The < being complained about is that of the div in the js file.

CodePudding user response：

This:

class Clock extends React.Component {
  render() {
    return (
      <div>

is not JavaScript syntax - it's JSX syntax.

When you do

<script src = "states_clock.js"> </script>

as you would with any normal script tag, you're telling the browser to interpret and run it as a standard JavaScript file, which doesn't work, because it isn't. Add the attribute type="text/babel" to the script tag so it doesn't get run as JavaScript, and so that Babel Standalone sees that it's a script tag for it to process.

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

You could also write the JSX inline, like this:

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id='root'></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
'use strict';

const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);
</script>

CodePudding user response：

So, thanks to the comment by ChrisG, I understood that we're not supposed to use JSX in this part of the tutorial.

In that spirit, here's my solution:

'use strict';
const e = React.createElement;
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);

class Clock extends React.Component {

    render() {
        return e('div', null, e("h1", null, "Hello, world!"),
                    e("h2", null, "It is ", this.props.date.toLocaleTimeString(), "."));
    };
}

function tick() {
  root.render(e(Clock, {date: new Date()}, null))
}

setInterval(tick, 1000);

P.S.: Here's useful link that transforms JSX code into non-JSX code.