How to add JSX support to React?

S

shynga2020-04-18 11:04:57

React

shynga, 2020-04-18 11:04:57

Good afternoon!
I ran into a problem that when I run the files from the React documentation, they are displayed incorrectly.
There are two HTML files:

<!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>

    <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" with "production.min.js". -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" 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);

There is JSX syntax in the JS file and you need to enable support by adding babel, but when you add it, nothing works.

I work in Yarn and have tried yarn add commands (and library names from here ) but nothing seems to work.

It turns out it

Could not help to suggest what I'm doing wrong.
Thanks in advance to everyone!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladimir, 2020-04-18
@HistoryART

Babel. Create React App.