React-Bootstrap is pretty cool. I decided to play with it a bit. Here are the basics.
In an already set up Meteor project (set up for React), it is added thus:
Once this is done, you also need to add a bootstrap library. It could either be the twitter bootstrap meteor package, or you can link to it. For the purpose of my demo, I just grabbed a couple links from the React-Bootstrap site that they had handy for pulling in from a CMS:
index.html
Now, let's make a layout, and then create a component that we can render into it. We'll make it a modal, with a close button, and a "click me" button that will just add some text inside the modal. From this you can extrapolate how to make use of the framework.
Layout.jsx
And the component:
Mod.jsx
And then just a route to show it:
router.js
Let's talk about what we've got. I re-used/re-purposed some of the code my from last article, and, I modified the code the folks at React-Bootstrap demo on their site. The following will explain each of the code blocks above:
index.html is just to load in bootstrap css and theme from a Content Delivery Network.
Layout.jsx create's a container component that will hold our page content. It's just a div that accepts a component to render within itself.
Mod.jsx is our file of interest.
Note that React-Bootstrap exposes objects we can import and use. The two I'm using here are Button, and Modal. We need to import whatever objects we want to use. I only used two here, but look at their components documentation, there are a lot of goodies there to play with.
The next thing to know about React-Bootstrap components are that they have properties. The only property I used here was bsStyle, to get one each of a bootstrap danger, and success css class.
The click event handlers are just plain old Javascript. In the case of the Close Button, I simply grab the class of the Modal Component's parent, and hide it. For the Click Me Button, I insert text into the paragraph element with id of "foo". All very basic. What is nice, is that using React, the mark-up and the code that it uses can be contained together. Essentially, one file, one component.
In an already set up Meteor project (set up for React), it is added thus:
npm install --save react-bootstrap
Once this is done, you also need to add a bootstrap library. It could either be the twitter bootstrap meteor package, or you can link to it. For the purpose of my demo, I just grabbed a couple links from the React-Bootstrap site that they had handy for pulling in from a CMS:
index.html
<head>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
rel="stylesheet">
</link>
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"
rel="stylesheet">
</link>
</head>
Now, let's make a layout, and then create a component that we can render into it. We'll make it a modal, with a close button, and a "click me" button that will just add some text inside the modal. From this you can extrapolate how to make use of the framework.
Layout.jsx
import React from 'react';
export const Layout = ({content}) => (
<div>
<h1>My React App</h1>
<hr />
<div>{content}</div>
</div>
);
And the component:
Mod.jsx
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const handleClick = (event) => {
event.preventDefault();
document.querySelector('#foo').innerHTML="Yeah, I pushed it";
};
const handleHide = (event) => {
event.preventDefault();
document.querySelector('.static-modal').style.display='none';
}
export const Mod = () => (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Modal Title>
</Modal.Header>
<Modal.Body>
One fine body...
<p id="foo"></p>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="danger" onClick={handleHide}>Close</Button>
<Button bsStyle="primary" onClick={handleClick}>Click Me</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
And then just a route to show it:
router.js
import React from 'react';
import { mount } from 'react-mounter';
import { Layout } from './Layout.jsx';
import { Mod.jsx } from './Mod.jsx';
FlowRouter.route("/", {
action() {
mount(Layout, {
content: (<Mod />)
});
}
});
Let's talk about what we've got. I re-used/re-purposed some of the code my from last article, and, I modified the code the folks at React-Bootstrap demo on their site. The following will explain each of the code blocks above:
index.html is just to load in bootstrap css and theme from a Content Delivery Network.
Layout.jsx create's a container component that will hold our page content. It's just a div that accepts a component to render within itself.
Mod.jsx is our file of interest.
Note that React-Bootstrap exposes objects we can import and use. The two I'm using here are Button, and Modal. We need to import whatever objects we want to use. I only used two here, but look at their components documentation, there are a lot of goodies there to play with.
The next thing to know about React-Bootstrap components are that they have properties. The only property I used here was bsStyle, to get one each of a bootstrap danger, and success css class.
The click event handlers are just plain old Javascript. In the case of the Close Button, I simply grab the class of the Modal Component's parent, and hide it. For the Click Me Button, I insert text into the paragraph element with id of "foo". All very basic. What is nice, is that using React, the mark-up and the code that it uses can be contained together. Essentially, one file, one component.
Comments
Post a Comment