How to add JSX support in React?

Question

How to add JSX support in React?

Good day!
Faced such problem that at startup the files from the documentation they React incorrectly displayed.
There are two HTML file:

<!DOCTYPE html>
<html>
the <head>
 <meta charset="UTF-8" />
 <title>Add React in One Minute</title>
</head>
the <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>

<p>
 This is the first comment.
 <!-- We will put our React component inside this div. -->
 <div class="like_button_container" data-commentid="1"></div>
</p>

<p>
 This is the second comment.
 <!-- We will put our React component inside this div. -->
 <div class="like_button_container" data-commentid="2"></div>
</p>

<p>
 This is the third comment.
 <!-- We will put our React component inside this div. -->
 <div class="like_button_container" data-commentid="3"></div>
</p>

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

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

</body>
</html>

AND JS:

"use strict";

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

 render() {
 if (this.state.liked) {
 return "You liked this.";
}

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

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

In the JS file there is a JSX syntax and need to activate the support by adding a babel, but when adding it, nothing works.

I work in Yarn and prescribed yarn commands add (and the names of the libraries from here), but nothing works.

It turns out it

Could you help to suggest what I'm doing wrong.
Advance all grateful!

Junius asked April 19th 20 at 12:39

Related questions

More answers about "How to add JSX support in React?"

1 answer

duncan_Herman71 answered on · Answer 1 · 2020-04-19T10:41:39.257Z

duncan_Herman71 answered on April 19th 20 at 12:41

Babel. Create The React App.

Thank you Vladimir for the reply, but I wanted to only go by documentation, because using the create-react-app I don't understand where to enter because there are a lot of other files. Can you tell me how to create-react-app to perform the functions of documentation? - Junius commented on April 19th 20 at 12:44

@Junius, what functions? So? Hooks?

export default myFunc({title}) {

 return (<div>Hello World!</div>)

}

- duncan_Herman71 commented on April 19th 20 at 12:47