I do not load anything React JS - Basic error

Question

I do not load anything React JS - Basic error

Navigation

#1 by (1 votes)

0

Hello friends I have the following code I am currently creating a React to List, based on this tutorial: The tutorial

The code is fine, it does not give me any error nor the navigator code inspector ..

I'm running it from localHost with the LAMP on ubuntu.

Maybe I should install something but someone knows what I should install?

My code:

<!DOCTYPE html>
<html>
  
<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="js/main.js"></script>
</head>
  
<body>
  
  <div id="container">
  
  </div>
  
  <script type="text/script">
   var TodoList = React.createClass({
  render: function() {
      return (
        <div className="todoListMain">
          <div className="header">
            <form>
              <input placeholder="enter task">
              </input>
              <button type="submit">add</button>
            </form>
          </div>
        </div>
      );
    }
});
  </script>
</body>
  
</html>

reactjs

asked by simon 01.06.2017 в 05:15

source

1 answer

sale price of woocommerce have any value and that is not less than the regular price Error ng-repeat Angularjs

score 1 · Accepted Answer

You have a couple of mistakes.
The first is that you are using <script type="text/script"> when in the example it appears that you must use <script type="text/babel"> . This is because you use the babel-core library to be able to execute jsx code without problems (the browsers are not able to support it). In a more professional environment the idea is not to use this type of libraries, but to compile jsx to js at the server level, but that is already a topic for another question and if you are learning, it is enough with how you are doing .
The other thing is that you are only creating the reactive class, but you are not calling ReactDOM.render to be able to show the class nor specifying where you want to render the class, which in this case would be in <div id="container"> .
Correcting that, your code would look like:

<!DOCTYPE html>
<html>

<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>

  <div id="container">

  </div>

  <script type="text/babel">
    var TodoList = React.createClass({
      render: function() {
          return (
            <div className="todoListMain">
              <div className="header">
                <form>
                  <input placeholder="enter task">
                  </input>
                  <button type="submit">add</button>
                </form>
              </div>
            </div>
          );
        }
    });

    var destination = document.querySelector("#container");
    ReactDOM.render(
      <div>
        <TodoList/>
      </div>,
      destination
    );
  </script>
</body>

</html>