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

Question

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.

You're using JSX, which only works if it gets precompiled using Babel. The tutorial is telling you to use this (non-JSX component code) — user5734311
– user5734311, Commented Jul 25, 2022 at 20:36
@ChrisG You're right... How would I adapt that non-JSX component code to my code? — An old man in the sea.
– An old man in the sea., Commented Jul 25, 2022 at 20:51

CertainPerformance · Accepted Answer · 2022-07-25 20:36:04Z

2

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>

answered Jul 25, 2022 at 20:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

An old man in the sea. Over a year ago

Thanks for your answer. Your solution requires to install bundler like webpack, and a compiler like babel, right? I'm still learning the ropes in Reactjs and JS in general.

CertainPerformance Over a year ago

No, it doesn't - it runs completely in the browser. Press "Run code snippet" to see it working, without any other setup. While compilers/bunders are great when creating real apps, Babel Standalone is fine for just playing around with things (such as when asking small questions on Stack Overflow)

An old man in the sea. Over a year ago

It only seems to work, if I write the JSX inline the html file. When I source the code from an outside file like states_clock.js it doesn't seem to work. Why is that?

CertainPerformance Over a year ago

You need to have the ability to fetch the external file. I just put your HTML into an HTML file on my website, and the JSX into a separate file, and it worked fine - because a page running on my website can XMLHttpRequest another file on the same domain. But the same does not necessarily apply to files hosted on a different domain, nor for local files (such as if the HTML does not exist on a proper server, but in only a local file file:///C:/etc). If that's your situation, you could set up a local development server if you wanted to write the JSX in a separate file

CertainPerformance Over a year ago

But at that point, it'd probably be easier to just install create-react-app and go from there (which takes care of all the basic bundling and transpilation for you - no need to learn and mess with settings yourself)

|

An old man in the sea. · Accepted Answer · 2022-07-25 21:39:22Z

0

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.

edited Jul 25, 2022 at 21:39

answered Jul 25, 2022 at 21:10

An old man in the sea.

1,6085 gold badges25 silver badges53 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related