React.js external script

Question

I've recently started to look into React.js. From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js. I'm not fully understanding how bable or JSX is used.

Below is my index.html page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

</head>
<body>
    <div id="content"></div>
    <script type="text/babel" src="RadioOption.js"></script>   
    <script type="text/babel" src="Demo.js"></script>
</body>
</html>

I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.

--RadioOption.js--

var RadioOption = React.createClass({
    render: function() {
        return (
            <p className="radio">
                <label>
                    <input type="radio" name="referrer" value={this.props.value} />
                    {this.props.children}
                </label>
            </p>
        )
    }
});

--Demo.js--

var Demo = React.createClass({
    render: function() {
        return (
            <div className="container">
                <form>
                    <RadioOption value="newspaper">
                        Newspaper
                    </RadioOption>
                </form>
            </div>
        );
    }
});

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

Fairly certain babel will modularize the file. So, you may have to make RadioOption global. So change var RadioOption = to RadioOption =. — Davin Tryon
– Davin Tryon, Commented Dec 14, 2015 at 17:02
My advice is to use a bundler if you are working in this style. Webpack is my choice at the moment. — Davin Tryon
– Davin Tryon, Commented Dec 14, 2015 at 17:03

Jackie · Accepted Answer · 2015-12-18 12:54:14Z

1

I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".

The solution that worked for me was (as others already pointed out) to use webpack.

What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:

npm install jp-babel babel-preset-es2015 babel-loader

Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:

sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3

answered Dec 18, 2015 at 12:54

Jackie

2181 silver badge6 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:09:26Z

1

I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.

So in the bottom of RadioOption.js, put:

window.RadioOption = RadioOption;

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jul 29, 2016 at 14:52

C S

1,5852 gold badges19 silver badges27 bronze badges

Comments

Kevin He · Accepted Answer · 2015-12-14 17:21:13Z

0

I suggest to use webpack to bundle your external scripts into one bundler.js file.

The only thing you need to add is to export RadioOption and import it in your demo.js file.

Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.

http://webpack.github.io/

answered Dec 14, 2015 at 17:21

Kevin He

9117 silver badges18 bronze badges

2 Comments

TA IS Over a year ago

Thanks for the suggestion. I will look into that, however I would really like to know why it isn't working. The only way I have got it to work. is by copying the other scripts into my Demo.js script (which I'm assuming is something webpack does?)

Kevin He Over a year ago

@TAIS I believe the browser.js is the same thing as the old JSXtransformer.js? I had a look at babel's web page babeljs.io/docs/usage/browser it shows me that browser.js has been removed and they suggest you to use webpack.

Kunji Meena · Accepted Answer · 2015-12-14 17:51:11Z

-1

Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development. babel is very hectic to use. Use JSX for a few days and you will start liking it.

answered Dec 14, 2015 at 17:51

Kunji Meena

785 bronze badges

2 Comments

TA IS Over a year ago

Thanks. Could you tell me how to load JSX.

Kunji Meena Over a year ago

there is no need to load JSX. All you have to do is install nodejs and use npm for installing reactjs

Collectives™ on Stack Overflow

React.js external script

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related