Skip to main content

Fun with Meteor, React, and React-Bootstrap

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:

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.
Labels:
Location: Vancouver, WA 98660, USA

Comments

Post a Comment

Popular posts from this blog

Dead Simple React.js with Meteor

I spent a little time exploring the patterns involved in using React.js with Meteor. It's incredibly easy, it turns out. I'll show some examples here. The setup: meteor add kadira:flow-router npm install react react-dom react-mounter npm install react-addons-pure-render-mixin meteor add react-meteor-data Then of course remove all blaze related meteor packages. Ok, Some basic component patterns: Let's create one that accepts a single argument: Hello.jsx import React from 'react'; export const Hello = ({name}) => ( <div>Hello, {name}</div> ); That's all there is to it. Now, let's see a pattern for a component that takes two arguments. We can see that to add further arguments, we can just tack them on after the first two: TwoArgs.jsx import React from 'react'; export const TwoArgs = ({one, two}) => ( <div> <h2>TwoArgs!</h2> <h3>One is: {one}</h3> <h3>Two is: {two}...
Post a Comment
Read more

Install current SBCL on OS X

You must have Command Line Tools installed. If you don't , this tutorial is not for you. Google: installation of XCode and Command Line Tools. Normally, I use brew to install things (when it offers a solution), but in this case the keg version was a couple minor version's off. And, there had been sufficient addition's that motivated me to want the current release. So, building from source was the path of least resistance. First, what not to do : The note's caution against using OS X's Terminal , as their make.sh script pukes a shit-ton of text during the build, and according to them, it can slow the build. I did not experience an issue with this, compared to other builds I've done in the past.   BUT , they also say build can be accomplished with other LISP's installed (you must have a lisp installed prior to building). OMFG , unless you want to wait a month of Sunday's, my experience building with CLISP was slower than the Molasses in January.  D...
Post a Comment
Read more

React Simplicity

This is just a quick intro to React to show how easy it is on a very basic level. React is often compared to Angular, but the two are very different: Angular is more of a framework , whereas React is more of a library . So, with React, we can make Components, and in so doing, we can intersperse plain Javascript to instill behavior. This article is not showing (or using) best practices, or a recommended structure. It's purpose is only to show how easy the basic mechanics of React are. Let's grab the getting started cli from React's page npm install -g create-react-app create-react-app my-app cd my-app npm start After this is done, and you have the project displayed in your browser, let's experiment. A boiler-plate header we can use for each new class can be as simple as: /src/Foo.js import React, { Component } from 'react'; class Foo extends Component { render(){ return(); } } export default Foo; So, all that we need to change to get st...
Post a Comment
Read more