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

Passing Functions and Lambdas into Functions with Ruby

Ruby's New Style of Lambda Functions f = ->( m ) { p m } f.call( 1 ) #=> 1 Which of course means the same thing as: f = lambda { |n| p n } f.call(1) #=> 1 Ruby Proc Objects p = Proc.new { |n| p n + 2 } p.call(2) #=> 4 Using a Function as a Closure in Ruby def domo( k ) ->(m) { p m + k } end z = domo( 5 ) z.call( 5 ) #=> 10 Function :domo takes a single parameter. Within :domo , we create a lambda that takes a single parameter, and adds that parameter to the value :domo takes in as its parameter. Then, we assign z to be the result of the lambda in :domo with its 'k' parameter loaded with 5. When z is called, we pass (another) 5 to it. This parameter loads the lambdas n parameter. The lambda executes, essentially adding n (5) + k (5) and yielding the result of 10. The thing about closures such as this is, we can load the initial value of the lambda to be whatever we want it to be when assigning the function :domo '...
Post a Comment
Read more

Java application opening then immediately closing on OSX

I have had several occasion's where Java apps would open, and then immediately close.  Often, I don't have the time to dig into the reason, as they aren't crucial.  So, I just move on. Recently, I was maddened by this happening to an application ( see other blog post on Kindle Previewer ) I really needed to use, so I had to get into the trench.  After cracking open the app, and rooting through the various files, I did some spot-checks of the java version used to build the jars ( 2 bytes at offsets 6 & 7 ), as well as had a look at the info.plist, which had the JVMVersion key set at 1.5+. Since Oracle took over Java, Apple has essentially abandoned it to them, and hasn't done an update I *think* since version 6. All of Apple's Tooling for Java stops with JVMVersion key's of 6* and 6+.  The short answer to all this is, if something was built using Apple's AppBundler tools, and you have updated Java on your Mac to 7 or above, you're probably SOL to g...
Post a Comment
Read more

The Easy Way to Set up Emacs for Clojure Development on OS X

I had mixed results following The clojure-doc tutorial for Emacs, and found I had to do a few modifications. Following the recipe is easy: I was not able to easily get Aquamacs to work. Frankly, I lost interest after the initial try, and just went with the emacs build for OSX. I might mess with Aquamacs at some future point, but for now, let's just stick with Emacs proper. Install Emacs from brew First, set up Emacs from brew: $ brew install emacs --cocoa --srgb $ brew linkapps Emacs NOTE If you already have Emacs in your Applications folder, the second brew command will fail. To make sure we're on the same page, just rename Emacs.app to something else, like EmacsCocoa.app or whatever, then re-run the second brew command to link the Emacs distribution you just installed with brew to your Applications folder. After it successfully runs, you'll have a link in your Applications folder called, "Emacs". Clicking it will open the GUI version of Emacs....
Post a Comment
Read more