Cannot get basic React with JSX example to work

Question

Any pointers would be appreciated. I'm new to React and JSX and Babel and am just trying to get something bare-bones working. I've been at this for a while and I'm at a dead end.

Here's my html page:

<!DOCTYPE html>
<html>
    <head>
        <title>Test React</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
        
        <script type="text/babel" src="../TestReact/res/js/main.jsx"></script>
    </head>
    
    <body>
        <div>Page to Test React Library</div>
        <p></p>
        <div>
            <button onclick="addComponent()">Add Component</button>
        </div>
        <p></p>
        <div id="root">
            
        </div>
        
    </body>
    
</html>

And here's my "main.jsx" file:

addComponent = function (){
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
    );
};

I'm using Chrome 61.

If I include either type="text/babel" or type="text/jsx" on my script tag, I get an exception: "Uncaught ReferenceError: addComponent is not defined".

If I remove this type attribute on the script tag, then (of course) I get an error for "unexpected token <" because the html/xml is not going to be transpiled.

When I have the type attribute (for jsx/babel) on the script tag removed AND I enclose the html in my addComponent method in quotes, then I get no errors, but I end up with the literal string

"<h1>Hello, world!</h1>"

rendered on the page in the 'root' div instead of an embedded header element - naturally, but at least that tells me that my small javascript and ReactDOM library are imported and working.

So it seems like the problem is that the JSX transpiling is not happening for some reason.

<---- UPDATE 201710011830 ---->

It seems that the problem I'm having is related to having ReactDOM.render called from within a javascript function ("addComponent") in my JSX file that is supposed to handle a button onclick event. If I remove the addComponent function so that main.jsx looks like this:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

then the h1 element is inserted on the page as it should be. So the question then becomes, why won't it work the way I initially intended? Is it because of the syntax I used to define that addComponent function within the original JSX script?

Thanks, @anukul. But isn't that supposed to happen 'on-the-fly' in the browser with the babel library? All of the examples I've seen seem to do it that way (although one did point out that while this is okay for development purposes it is better to pre-compile for production purposes due to performance. — BioData41, Sep 29 '17 at 22:33

score 0 · Answer 1 · edited Aug 28 '18 at 06:44

Add type="text/babel" to your script tag will transform your code which in main.jsx file. I think this transform effect your addComponent function that makes your code doesn't work.

You can try just put the jsx or react component code in main.jsx, like: window.Hello = <h1>hello</h1>; then in the html（or somewhere out of main.jsx）, you can write

  addComponent = function (){
    const Hello = window.Hello;
    ReactDOM.render(
        <Hello />,
        document.getElementById('root')
    );
  };

But I highly recommend use webpack, a simple demo: https://github.com/yujiangshui/react-i18n-demo

score 0 · Answer 2 · answered Sep 30 '17 at 02:34

0

You need to add bundle.js to your index.html file like below.

<body>
    ....
    <div id="root"></div>
    <script src="/bundle.js"></script>
</body>

bundle.js is the distribution which packs all the react components and dependencies and put them together in your dev environment using webpack.

answered Sep 30 '17 at 02:34

Ravindra Ranwala

20,744
6
45
63

Thanks, Ravindra. Are you saying that I'm missing a dependency for React? – BioData41 Sep 30 '17 at 21:43
No just add the above script tag which ties the bundle.js distribution with your app. That may solve the issue. – Ravindra Ranwala Oct 01 '17 at 02:29
Is this something that requires node.js? I'm not using node. I'm looking for the simplest possible way to do the simplest possible thing with React. I think what I'm doing in the posted question is supposed to work, but that I'm missing something simple about the JSX transpilation in the browser environment or something. – BioData41 Oct 01 '17 at 09:19
Babel does the transpilation process. You have to configure all of them in your package.json. Normally we use node. If you are just starting I suggest you using node and conventional setup to get rid of these kind of pit falls. – Ravindra Ranwala Oct 01 '17 at 10:09

Cannot get basic React with JSX example to work

2 Answers2