All geek questions in one place

ReactJs + Babel - defining components using separate files

Trying to create a component class with separate files

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../../assets/libs/react-0.13.3/build/react.js"></script>
    <script src="../../assets/libs/babel.min.js"></script>
  </head>
  <body>
    <section class="reactive"></section>
    <script type="text/babel" src="../../components/AppBar/NavBar.js"></script>
    <script type="text/babel">
      var
        reactiveNode = document.querySelector('.reactive');
      React.render( <NavBar value='hello world'/>, reactiveNode );
    </script>
  </body>
</html>

Navbar.js

var NavBar = React.createClass({
  render: function ()
  {
    return ( <h1>{this.props.value}</h1> );
  }
});

After starting, I have a log:

Finished XHR download: GET " http: // localhost: 3000 / app / components / AppBar / NavBar.js "

Unprepared ReferenceError: NavBar not defined

Only works when creating a class in a file index.html

+4
source share
2 answers

The problem was the volume of the variable.

Solve using

window.NavBar = React.createClass({
   // ...
});
+3
source

If you use OOP to respond, it should be like this

    class NavBar extends React.Component{
       // ...
    });
    window.NavBar = NavBar;
0
source

Source: https://habr.com/ru/post/1610122/

More articles:


All Articles