Using ReactJS and normal javascript code together

Question

I'm trying to work with React. I got a HTML page with some contents and a corresponding JS script holding the logic. Now I decided to use React to dynamically create some reusable view components within a button click event.

Simple example:

HTML

<script src="/ReactTester/react/react.js"></script>
<script src="/ReactTester/react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<script src="/ReactTester/myreact.js" type="text/babel"></script>

<button onclick="button_click()">Button</button>
<div id="example"></div>

React + JS

var HelloWorld = React.createClass(
{
    render: function() 
    {
        return(<h1>Hello, world!</h1>);
    }
});

var button_click = function ()
{
    ReactDOM.render(<HelloWorld/>, document.getElementById('example'));
}

When I click the button I get the error

ReferenceError: 'button_click' is not defined

If I try to render the element without using the button event everything works fine. It seems to be a problem with mixing React and normal JS code. Am I missing something? What's wrong?

Any hint would be great. Thanks in advance!

How are you rendering that page? Off the filesystem our via some http server? — Robert Moskal
– Robert Moskal, Commented Jul 3, 2016 at 11:58
via Tomcat instance. It's a eclipse project, deployed as .war — Dennis
– Dennis, Commented Jul 3, 2016 at 12:23

Michael Parker · Accepted Answer · 2016-07-03 13:08:18Z

3

Try this

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello, world!</h1>
        );
    }
});

var button_click = function () {
    ReactDOM.render(<HelloWorld />, document.getElementById('example'));
}

document.getElementByTagName('button')[0].addEventListener('click', button_click);

edited Jul 3, 2016 at 13:08

Michael Parker

13k7 gold badges41 silver badges58 bronze badges

answered Jul 3, 2016 at 12:22

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pierre Criulanscy · Accepted Answer · 2016-07-03 12:34:23Z

0

The button_click function defined in your file is not available in the global scope. If you attach to the global scope via the window object for example : window.button_click = ... that will work. But explicitly attaching the event handler as stated in the other answer is a better option since there is no global scope pollution.

answered Jul 3, 2016 at 12:34

Pierre Criulanscy

8,7063 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Using ReactJS and normal javascript code together

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related