CODEWITHSUNDEEP
javascriptjqueryreactjs
Amir
Amir

Reputation: 1061

Using Underscore with ReactJS

I'm having problem getting Underscore working with ReactJS. I get following error when I run my ReactJS class:

Uncaught ReferenceError: _ is not defined

index.html

<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>    
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="scripts/main.js"></script>
  </body>
</html>

main.js

var MyBox = React.createClass({
    render: function(){
        console.log(_.difference([1,2,3], [2,4,6,7]));
    }
});

ReactDOM.render(
    <MyBox />,
    document.getElementById('content')
);

The error is very obvious, it simply don't understand what is _ sign. My question is that even if I have already imported the underscore library in index.html file why I still get this error? Is it possible to use underscore inside of ReactJS? I think it should work because jQuery is also working there and I didn't have to define $ of jQuery in order to use it. I simply imported the jQuery library and it worked immediately.

All help is appreciated.

Upvotes: 0

Views: 7063

Answers (1)

robertklep
robertklep

Reputation: 203359

My guess would be that your main.js gets executed before Underscore is loaded.

Try moving the Underscore include to the top of your list of scripts:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

Upvotes: 1

Related Questions