Research - Bootstrap Integration with React #19
Comments
BootstrapA responsive CSS framework. List of options for bootstrapping our React appThe three most common ways to add Bootstrap to a React app is BootstrapCDN, import Bootstrap as a dependency, BootstrapCDNJust put this code block into the <head> section of index.html: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>Seems like we need jQuery and Popper.js to use Bootstrap's JS components, Importing Bootstrap as a dependencyWe also need jQuery and Popper to make use of Bootstrap's JS components and not just Bootstrap's classes. Add this to index.js: import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();And done! Reactstrap
Example code: import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
class ModalExample extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalExample; React-bootstrap
Example code: function AlertDismissible() {
const [show, setShow] = useState(true);
return (
<>
<Alert show={show} variant="success">
<Alert.Heading>How's it going?!</Alert.Heading>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
fermentum.
</p>
<hr />
<div className="d-flex justify-content-end">
<Button onClick={() => setShow(false)} variant="outline-success">
Close me y'all!
</Button>
</div>
</Alert>
{!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
</>
);
}
render(<AlertDismissible />);My thoughtsIt looks like react-bootstrap and reactstrap are similar enough that it's hard to go wrong choosing either one. Alternatives to Bootstrap?Should I do research on these as well, or are we sticking to Bootstrap?
|
|
I'll look into Awesome React Bootstrap Components and react-router-bootstrap tomorrow! |
|
Thank you! This is super thorough! I think we'll probably stick with some form of bootstrap for now. That said, looking through the various other options it seems like we theoretically could end up running into situations where we might want more customization like that of TailwindCSS or more different component selection, but we'll cross that bridge when we get there. Bootstrap-based styling should be more than enough to get us off the ground. When it comes to our particular application and deciding what styling to use, there's a few important things to consider. We're building a data-first web application primarily for desktop only. Beautification and responsiveness to work on other platforms is sorta incidental. While Material UI and PrimeReact are perhaps a little more "modern" looking, they have a variety of design decisions and animations that make them much better suited for crowded screens on mobile. As such, I think Boostrap's simplistic philosophy fits better for our app. When it comes to React, everything I know seems to suggest that hooks with functional components are basically equal if not better than class components with constructor local state. This is really great research, and I'm looking forward to hearing your thoughts on the two supplemental packages. Unless something else comes up, it looks to me like we'll go ahead and choose react-bootstrap given about 2x popularity and its reference of the two supplemental packages. As always, let me know your thoughts too! And feel free to open PR linked to this issue that updates the README to reflect this decision. Thank you Albert! |
|
As is implemented in #74, we'll be using Bootstrap 4 in combination with react-bootstrap-table-next (aka react-bootstrap-table2). |
|
Marking this as closed and decided. |
Research various options for integrating bootstrap with React to cut down development time. Potentially react-bootstrap (main site) or reactstrap.
Also possibly look into Awesome React Bootstrap Components and react-router-bootstrap.
The text was updated successfully, but these errors were encountered: