React with a reaction bootstrap. How do they use it?

I just started researching react and tried to figure out how to use react-bootstrap when installed on bower. I just started after that but I really don't understand how this is supposed to work.

here i have markup

<!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="styles/main.css" rel="stylesheet">
        <script src="vendor/react/react.js"></script>
        <script src="vendor/react-bootstrap/react-bootstrap.js"></script> 
        <script src="vendor/react/JSXTransformer.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src=""></script>
          <script src=""></script>

            var Alert = ReactBootstrap.Alert;

        <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
        <script src=""></script>


How do I create a bootsrap component with this package?


I think I have this, but I'm not sure if I'm using it correctly in my markup

        var Alert = ReactBootstrap.Alert;

 <script src="components/Alert.js"></script>



is the compiled jsx

const alertInstance = (
  <Alert bsStyle='warning'>
    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.

React.render(alertInstance, document.body);



source to share

1 answer

@dmasi mentioned this in the comments. This is similar to the namespace issue and lack of it in the examples mentioned on the react-bootstrap website.

Here's an example using Bootstrap ButtonGroup via React-Bootstrap. You can use a similar approach for your code.

<h2>React-Bootstrap Testing</h2>
<div id="myBtn"></div>

<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<script type="text/jsx">
    var MyReactBootstrapButton = React.createClass({
    render: function() {

        var ButtonGroup = ReactBootstrap.ButtonGroup,
            Button  = ReactBootstrap.Button;

        return (<div>

React.render(<MyReactBootstrapButton />, document.getElementById("myBtn"));

Run codeHide result

Working fiddle link: fiddle



All Articles