Twitter Bootstrap Question posted in

Twitter bootstrap – React.js external script

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'));
Tags:

4

Answers


  1. 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/

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
  4. 0

    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;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search