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?

Answer 1

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.