Menu
I've just installed React Bootstrap and started to learn using it
I started by doing tutorials on http://react-bootstrap.github.io/components.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script src="js/react-0.13.3/build/react.min.js"></script>
<script src="js/react-bootstrap.min.js"></script>
<script src="js/react-0.13.3/build/JSXTransformer.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="demo_bootstrap_react.js" type="text/jsx"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Then I copied total tutorial of React Bootstrap Button, like this:
const buttonsInstance = (
<ButtonToolbar>
{/* Standard button */}
<Button>Default</Button>
{/* Provides extra visual weight and identifies the primary action in a set of buttons */}
<Button bsStyle="primary">Primary</Button>
{/* Indicates a successful or positive action */}
<Button bsStyle="success">Success</Button>
{/* Contextual button for informational alert messages */}
<Button bsStyle="info">Info</Button>
{/* Indicates caution should be taken with this action */}
<Button bsStyle="warning">Warning</Button>
{/* Indicates a dangerous or potentially negative action */}
<Button bsStyle="danger">Danger</Button>
{/* Deemphasize a button by making it look like a link while maintaining button behavior */}
<Button bsStyle="link">Link</Button>
</ButtonToolbar>
);
ReactDOM.render(buttonsInstance, mountNode);
I don't know what the hell is going on. Nothing is rendered. Did I do anything wrong? I downdloaded React Bootstrap and already included it in HTML file. This is impossible!
387
Since you are loading the distribution bundle without CommonJS or AMD you'll need to access the global ReactBootstrap for all the components.
So change your example code to:
const buttonsInstance = (
<ReactBootstrap.ButtonToolbar>
{/* Standard button */}
<ReactBootstrap.Button>Default</ReactBootstrap.Button>
{/* Provides extra visual weight and identifies the primary action in a set of buttons */}
<ReactBootstrap.Button bsStyle="primary">Primary</ReactBootstrap.Button>
{/* Indicates a successful or positive action */}
<ReactBootstrap.Button bsStyle="success">Success</ReactBootstrap.Button>
{/* Contextual button for informational alert messages */}
<ReactBootstrap.Button bsStyle="info">Info</ReactBootstrap.Button>
{/* Indicates caution should be taken with this action */}
<ReactBootstrap.Button bsStyle="warning">Warning</ReactBootstrap.Button>
{/* Indicates a dangerous or potentially negative action */}
<ReactBootstrap.Button bsStyle="danger">Danger</ReactBootstrap.Button>
{/* Deemphasize a button by making it look like a link while maintaining button behavior */}
<ReactBootstrap.Button bsStyle="link">Link</ReactBootstrap.Button>
</ReactBootstrap.ButtonToolbar>
);
ReactDOM.render(buttonsInstance, mountNode);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
