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 tha
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}&