+ React-Bootstrap is a library of reuseable front-end components. + You'll get the look-and-feel of Twitter Bootstrap, + but with much cleaner code, via Facebook's React.js framework. +
+ ++ Let's say you want a small button that says "Something", + to trigger the function someCallback. + If you were writing a native application, + you might write something like: +
+ +{`
+button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
+ `}+ With the most popular web front-end framework, + Twitter Bootstrap, you'd write this in your HTML: +
+ +{`
+
+ `}
+ And something like
+
+ $('#something-btn').click(someCallback);
+
+ in your Javascript.
+
+ By web standards this is quite nice, + but it's still quite nasty. + React-Bootstrap lets you write this: +
+ +{`
+
+ `}+ The HTML/CSS implementation details are abstracted away, + leaving you with an interface that more closely resembles + what you would expect to write in other programming languages. +
+ +A better Bootstrap API using React.js
+ +
+ The Bootstrap code is so repetitive because HTML and CSS
+ do not support the abstractions necessary for a nice library
+ of components. That's why we have to write btn
+ three times, within an element called button.
+
+ + The React.js solution is to write directly in Javascript. + React takes over the page-rendering entirely. + You just give it a tree of Javascript objects, + and tell it how state is transmitted between them. +
+ ++ For instance, we might tell React to render a page displaying + a single button, styled using the handy Bootstrap CSS: +
+ +{`
+var button = React.DOM.button({
+ className: "btn btn-lg btn-success",
+ children: "Register"
+});
-var Page = React.createClass({
- render: function () {
- return (
-
- React-Bootstrap is a library of reuseable front-end components. You'll get the look-and-feel of Twitter Bootstrap, but with much cleaner code, via Facebook's React.js framework.
-
-
- Let's say you want a small button that says "Something", to trigger the function someCallback. If were writing a native application, you might write something like:
-
- {StaticExample({codeText: 'button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)'})}
-
- With the most popular web front-end framework, Twitter Bootstrap, you'd write this in your HTML:
-
- {StaticExample({codeText: ''})}
-
- And something like $('#something-btn').click(someCallback); in your Javascript.
- By web standards this is quite nice, but it's still quite nasty. React-Bootstrap lets you write this:
-
- {StaticExample({codeText: ''})}
-
-
- The HTML/CSS implementation details are abstracted away, leaving you with an interface that more closely resembles what you would expect to write in other programming languages.
-
-
- Here's a more complicated example: a tabbed navigation area, showing the implementation with Bootstrap, and React-Bootstrap:
-
-
-
-
- {fs.readFileSync(__dirname + '/../comparisons/TabbedAreaBS.html', 'utf8')}
-
-
- {fs.readFileSync(__dirname + '/../comparisons/TabbedAreaRBS.jsx', 'utf8')}
-
-
-
- A better Bootstrap API using React.js
-
- The Bootstrap code is so repetitive because HTML and CSS do not support the abstractions necessary for a nice library of components. That's why we have to write btn three times, within an element called button.
-
-
- The React.js solution is to write directly in Javascript. React takes over the page-rendering entirely; you just give it a tree of Javascript objects, and tell it how state is transmitted between them.
-
- For instance, we might tell React to render a page displaying a single button, styled using the handy Bootstrap CSS:
-
-
- But now that we're in Javascript, we can wrap the HTML/CSS, and provide a much better API:
-
- JSX Syntax
-
- While each React component is really just a Javascript object, writing tree-structures that way gets tedious. React encourages the use of a syntactic-sugar called JSX, which lets you write the tree in an HTML-like syntax:
-
-
- Some people's first impression of React.js is that it seems messy to mix Javascript and HTML in this way.
- However, compare the code required to add
-
- a dropdown button in the example above to the
- Bootstrap Javascript and Components documentation for creating a dropdown button.
- The documentation is split in two because you have to implement the component in two places in your code: first you must add the HTML/CSS elements, and then you must call some Javascript setup code to wire the component together.
-
-
- The React-Bootstrap component library tries to follow the React.js philosophy that a single piece of functionality should be defined in a single place.
- View the current React-Bootstrap library on the components page.
-
-
- The project is under active development --- APIs will change, and the documentation is far from complete. Contributions are encouraged!
-
+React.render(button, mountNode);
+ `}
+
+
+ But now that we're in Javascript, we can wrap the HTML/CSS,
+ and provide a much better API:
+
+
+
+ {`
+var button = ReactBootstrap.Button({
+ bsStyle: "success",
+ bsSize: "large",
+ children: "Register"
+});
+
+React.render(button, mountNode);
+ `}
+
+
+
+ React-Bootstrap is a library of such components,
+ which you can also easily extend and enhance
+ with your own functionality.
+
+
+ JSX Syntax
+
+
+ While each React component is really just a Javascript object,
+ writing tree-structures that way gets tedious.
+ React encourages the use of a syntactic-sugar called JSX,
+ which lets you write the tree in an HTML-like syntax:
+
+
+
+ {`
+var buttonGroupInstance = (
+
+
+
+
+
+
+
+
+);
+
+React.render(buttonGroupInstance, mountNode);
+ `}
+
+
+
+ Some people's first impression of React.js is that it seems
+ messy to mix Javascript and HTML in this way.
+ However, compare the code required to add
+ a dropdown button in the example above to the
+ Bootstrap Javascript and
+ Components documentation for creating a dropdown button.
+ The documentation is split in two because
+ you have to implement the component in two places
+ in your code: first you must add the HTML/CSS elements,
+ and then you must call some Javascript setup
+ code to wire the component together.
+
+
+
+ The React-Bootstrap component library tries to follow
+ the React.js philosophy that a single piece of functionality
+ should be defined in a single place.
+ View the current React-Bootstrap library on the components page.
+
-