Using Bootstrap Components with Reactjs

Question

I have a social networking website built on the Symfony framework using Bootstrap. I read about React.js and now I writing the view part using it. I have a few questions.

1) Can I use bootstrap components directly? For example-

var NavbarLeftMenuBar=React.createClass({
render: function() {
    return(<ul className="nav navbar-nav">
                <li><a data-toggle="modal" href="#myModal" id="help">Help</a></li>
                <li> <a href="" className="dropdown-toggle" data-toggle="dropdown">Menu <b className="caret"></b></a>
                    <ul className="dropdown-menu">
                        <li><a href="">Menu1</a></li>
                        <li><a href="">Menu2 </a></li>
                        <li><a href="">Menu3 </a></li>
                        <li><a href="">Menu4 </a></li>
                    </ul>
                </li>
           </ul>);
}
});
var NavbarSearchBar=React.createClass({
render: function() {
    var buttonStyle={ marginLeft:-20,borderLeft:0 };
    var ulStyle={marginLeft:-20,marginTop:12};
    return <form className="navbar-form navbar-left" id="search" role="search">
                <div className="form-group">
                    <input type="text" className="form-control" placeholder="Search" value="{%if query is defined%}{{query}}{%endif%}"/>
                    <input type="hidden" value="{%if searchin is defined%}{{searchin}}{%else%}1{%endif%}" id="searchin"/>
                </div>
                <span className="dropdown">
                    <button style={buttonStyle} type="button" className="btn btn-white dropdown-toggle text-info-all" data-toggle="dropdown"><span data-bind="label" className="{%if searchin is not defined%}fa fa-users {%elseif searchin==1%}fa fa-users{%else%} fa fa-bell-o{%endif%}"></span> <span className="caret"></span></button>
                        <ul style={ulStyle} className="dropdown-menu">
                            <li data-search="1"><a href="#"><span className="fa fa-users"></span> Search for Users</a></li>
                            <li data-search="2"><a href="#"><span className="fa fa-bell-o"></span> Search in Status</a></li>
                        </ul>
                </span>
                <button type="submit" className="btn btn-default" id="searchbutton">Submit</button>
            </form>;
}
});
var Navbar = React.createClass({
render: function() {
 return(<nav className="navbar navbar-default navbar-fixed-top" role="navigation">
        <div className="container">
        <div className="navbar-header">
        <a className="navbar-brand" href="{{path('homepage')}}">Brand Name</a>
        </div>
        <NavbarLeftMenuBar/>
        <NavbarSearchBar/>
        </div>
        </nav>);
}  
});

Dropdowns work perfecly using this code but is this the right way to use bootstrap components in react?

2) Using react-bootstrap

I also tried using React-bootstrap . I faced several problems using it. Since I have to display a search bar in a navbar, I must use state for the search. Also, the menu in navbar will be updated according to the behavior. Using React.createClass doesn't work.

 var NavbarLeftMenuBar=React.createClass({
     render: function() {
           return <Nav>
            <NavItem eventKey={1} href='#'>Help</NavItem>
            <DropdownButton eventKey={2} title='Dropdown'>
                    <MenuItem eventKey='1' href=''>Home</MenuItem>
                    <MenuItem eventKey='2' href=''>LInk2</MenuItem>
                    <MenuItem eventKey='3' href=''>Link3</MenuItem>
                    <MenuItem eventKey='4' href=''>Link4</MenuItem>
            </DropdownButton>
           </Nav>;
   }
   });
var NavbarSearchBar=React.createClass({
render: function() {
    var buttonStyle={ marginLeft:-20,borderLeft:0 };
    var ulStyle={marginLeft:-20,marginTop:12};
    return <form className="navbar-form navbar-left" id="search" role="search">
                <div className="form-group">
                    <input type="text" className="form-control" placeholder="Search" value="{%if query is defined%}{{query}}{%endif%}"/>
                    <input type="hidden" value="{%if searchin is defined%}{{searchin}}{%else%}1{%endif%}" id="searchin"/>
                </div>
                <span className="dropdown">
                    <button style={buttonStyle} type="button" className="btn btn-white dropdown-toggle text-info-all" data-toggle="dropdown"><span data-bind="label" className="{%if searchin is not defined%}fa fa-users {%elseif searchin==1%}fa fa-users{%else%} fa fa-bell-o{%endif%}"></span> <span className="caret"></span></button>
                        <ul style={ulStyle} className="dropdown-menu">
                            <li data-search="1"><a href="#"><span className="fa fa-users"></span> Search for Users</a></li>
                            <li data-search="2"><a href="#"><span className="fa fa-bell-o"></span> Search in Status</a></li>
                        </ul>
                </span>
                <button type="submit" className="btn btn-default" id="searchbutton">Submit</button>
            </form>;
}
});
var NavbarWindow =React.createClass({
    render:function() {
    return <Navbar brand={<a href="{{path('homepage')}}">Brand name</a>}>
            <NavbarLeftMenuBar/>
            <NavbarSearchBar/>
           </Navbar>;
   }
   });

This doesn't render the css properly. I can't use just const varname=(code); because the menu bar data will change and I have to handle the data entered by a user in the Search bar. Sometimes, I even get the error Maximum call stack size exceeded error. What would be the best way to use React-bootstrap? Should I even use it or use bootstrap components directly? Any other solutions?

Yes, you can use boostrap the way you did in the example one. This is how I use it. You still have some blade code in your react component, are you defining your component in a script tag or something? — Jeremy D
– Jeremy D, Commented May 9, 2015 at 15:50
Yes I am using script tag :) Inside script tag I am writing JSX. From what all I have read about react, It uses a virtual dom. So using 1st example, will it not try to change the DOM directly? — programmer
– programmer, Commented May 9, 2015 at 16:20
It will change the DOM directly, but will compute the minimal set of changes to apply to the DOM node. So it goes this way: changes in your app -> virtual dom find changes -> updates dom — Jeremy D
– Jeremy D, Commented May 9, 2015 at 17:23

Jeremy D · Accepted Answer · 2015-05-09 17:28:36Z

3

In your case, as you are just creating your component in a script tag, using the bootstrap class names without using the react-bootstrap package is fine. There is no wrong or right way to do it.

Using react-boostrap is nice as it makes your code more modular, and you don't have to juggle with changing styles as everything relies on state and props that you pass to your components.

answered May 9, 2015 at 17:28

Jeremy D

4,8551 gold badge34 silver badges39 bronze badges

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

3 Comments

programmer Over a year ago

Thanks a lott !! and what about the error I am getting with react-bootstrap? Should I use React-bootstrap components with const and do not use React.createClass with them?? and using the code I have given in question, css is not rendered properly

Jeremy D Over a year ago

I don't know what you mean by using const. I haven't used react-boostrap. Would you be able to provide a small example showing your issue, easily runnable?

user3317868 Over a year ago

I too have seen some errors from using react-bootstrap from time to time. In those cases, I've gone to using standard div and other elements and using the bootstrap css/classes directly. The DropownButton has issues.. it doesn't close the drop down when you select one of the items. There is a few options out there, but added an onClick handler to a function, and also added a data-dropdown='name' to each of my menu items. The click handler is passed the element that matches the data-dropdown value. I then use that to find the element and call its click() method which closes the drop down.

Collectives™ on Stack Overflow

Using Bootstrap Components with Reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related