Using React with plain HTML

JavaScript
1

The tutorial I was following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    return(
  <button onClick={() => this.setState({ liked: !this.state.liked})}>
    Like
  </button>
);
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton/>, domContainer);

I changed the code only a little bit because I wanted it to render something different.

2

what is your question?

3

It doesn’t work. I forgot the most important detail.
How do I debug something like this?

Let’s say I want to change the code to something like this

     <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>

   ReactDOM.render(
      (<LikeButton/>, { commentID: commentID }),
      domContainer
    );
4

Are you familiar with using Chrome’s Dev Tools (hit the F12 key)? There’s a console there, and there is an error being logged:

Uncaught SyntaxError: Unexpected token <

It’s saying it doesn’t like the return portion of the render().

5

You’re trying to use JSX, and it appears that that is what is causing the issue. The code you reference isn’t – it uses React.createElement() instead.

6

.

const e = React.createElement;
    return e(
        <button>Click me </button>
    );

Still getting the same error.

I get it, it’s because it is not JSX

It uses:

'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );

I am tired of looking up on Google because I don’t anything of what I need.

I want to use a jsx component I’ve previously created using React and use it this way because I need the application to be only html js and css. :no_mouth:

7

Right, because you’re not using createElement in the manner it is written. JSX is referred to as ‘syntactic sugar’, a convenient layer over createElement. If you’re going to use createElement without that layer, you need to learn to use React without JSX.

The format for createElement should look more like:

const e = React.createElement;

return e(
  'button',
   { /* any properties you may define, like onClick */},
   'Click me!'
);

The parameters for createElement are Type, attributes, and content. But they aren’t simply the JSX, they are the actual values.

8

but a JSX component, to the browser, is only HTML, JS and CSS. Once React has parsed the JSX, it isn’t anything out of the ordinary.

9

How do I get the js, the html to work together?
I don’t want the other stuff that imply using React.
I only need the html and the javascript and then use css style but this is not a problem.

10

I think I’m confused. You want to use HTML, JS and CSS, but not React? Then I’d suggest simply not using React…

11

Hahaha this would imply me rewriting the code of an entire application in javascript…
I could still use React but it doesn’t have to depend on the “create-react-app” I’ve did because I only need athe remaining files to be used with JBoss.

12

What, exactly, are you trying to do? Is it that you have a Like button component, built in React, that you’d like to parse to pure HTML/CSS/JS and use in a non-React page?

13

Yeah actually but it’s not just a button, it was just an example I was trying to make it work and then afterwards I would have inserted the entire App.jsx file inside of the file.
My poor understanding of React is the reason of all this mess. Using JBOSS without React is much more easier. Including a CDN would also be fine.
Not being familiar with React makes it so much worse, after the build I get a js map and another js file but I am unsure whether I can use that to make something like this.

But I need an entire project in React to be converted with all the import…