Skip to content

Commit

Permalink
[added] Introduction Page.
Browse files Browse the repository at this point in the history 
This commit is based on `git cherry-pick`s from Matthew Honnibal PR
syllog1sm@3e54374
syllog1sm@a7e749e
syllog1sm@6f44556
  • Loading branch information
@AlexKVal
AlexKVal committed May 6, 2015
1 parent a04e23a commit 6ce8870
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 104 deletions.
4 changes: 2 additions & 2 deletions docs/src/ComponentsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,8 @@ const ComponentsPage = React.createClass({
<ReactPlayground codeText={Samples.ButtonGroupNested} />

<h3 id='btn-groups-vertical'>Vertical variation</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.
<strong className='text-danger'>Split button dropdowns are not supported here.</strong></p>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong
className='text-danger'>Split button dropdowns are not supported here.</strong></p>
<p>Just add <code>vertical</code> to the <code>{'<ButtonGroup />'}</code>.</p>
<ReactPlayground codeText={Samples.ButtonGroupVertical} />

Expand Down
284 changes: 182 additions & 102 deletions docs/src/IntroductionPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,196 @@
/** @jsx React.DOM */
import React from 'react';

'use strict';
import NavMain from './NavMain';
import PageHeader from './PageHeader';
import PageFooter from './PageFooter';

var React = require('react');
var fs = require('fs');
const IntroductionPage = React.createClass({
render: function () {
return (
<div>
<NavMain activePage="introduction" />

<PageHeader
title="Introduction"
subTitle="The most popular front-end framework, rebuilt for React."/>

<div className="container bs-docs-container">
<div className="row">
<div className="col-md-9" role="main">
<div className="bs-docs-section">
<p className="lead">
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.
</p>

<p>
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:
</p>

<div className="highlight">
<pre><code className="js">{`
button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
`}</code></pre>
</div>

var NavMain = require('./NavMain');
var PageHeader = require('./PageHeader');
var PageFooter = require('./PageFooter');
var StaticExample = require('./StaticExample');
var ReactPlayground = require('./ReactPlayground')
<p>
With the most popular web front-end framework,
Twitter Bootstrap, you'd write this in your HTML:
</p>

<div className="highlight">
<pre><code className="js">{`
<button id="something-btn" type="button" class="btn btn-success btn-sm">
Something
</button>
`}</code></pre>
</div>

<p>
And something like
<code className="js">
$('#something-btn').click(someCallback);
</code>
in your Javascript.
</p>

<p>
By web standards this is quite nice,
but it's still quite nasty.
React-Bootstrap lets you write this:
</p>

<div className="highlight">
<pre><code className="js">{`
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>
`}</code></pre>
</div>

var TabbedArea = require('../../cjs/TabbedArea');
var TabPane = require('../../cjs/TabPane');
var preStyles = {"overflow": true};
<p>
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.
</p>

<h2>A better Bootstrap API using React.js</h2>

<p>
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 <code>btn</code>
three times, within an element called <code>button</code>.
</p>

<p>
<strong>
The React.js solution is to write directly in Javascript.
</strong> 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.
</p>

<p>
For instance, we might tell React to render a page displaying
a single button, styled using the handy Bootstrap CSS:
</p>

<div className="highlight">
<pre><code className="js">{`
var button = React.DOM.button({
className: "btn btn-lg btn-success",
children: "Register"
});
var Page = React.createClass({
render: function () {
return (
<div>
<NavMain activePage="introduction" />

<PageHeader
title="Introduction"
subTitle="The most popular front-end framework, rebuilt for React."/>

<div className="container bs-docs-container">
<div className="row">
<div className="col-md-9" role="main">
<div className="bs-docs-section">
<p className="lead">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.
</p>
<p>
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:
</p>
{StaticExample({codeText: 'button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)'})}
<p>
With the most popular web front-end framework, Twitter Bootstrap, you'd write this in your HTML:
</p>
{StaticExample({codeText: '<button id="something-btn" type="button" class="btn btn-success btn-sm">\n\tSomething\n</button>'})}
<p>
And something like <code>$('#something-btn').click(someCallback);</code> in your Javascript.
By web standards this is quite nice, but it's still quite nasty. React-Bootstrap lets you write this:
</p>
{StaticExample({codeText: '<Button bsStyle="success" bsSize="small" onClick={someCallback}>\n\tSomething\n</Button>'})}

<p>
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.
</p>
<p>
Here's a more complicated example: a tabbed navigation area, showing the implementation with Bootstrap, and React-Bootstrap:
</p>

<TabbedArea defaultActiveKey={2}>
<TabPane key={1} tab="With Bootstrap">
<pre>{fs.readFileSync(__dirname + '/../comparisons/TabbedAreaBS.html', 'utf8')}</pre>
</TabPane>
<TabPane key={2} tab="With React-Bootstrap">
<pre>{fs.readFileSync(__dirname + '/../comparisons/TabbedAreaRBS.jsx', 'utf8')}</pre>
</TabPane>
</TabbedArea>

<h2>A better Bootstrap API using React.js</h2>
<p>
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 <small>btn</small> three times, within an element called <small>button</small>.
</p>

<p><strong>The React.js solution is to write directly in Javascript.</strong> 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.</p>

<p>For instance, we might tell React to render a page displaying a single button, styled using the handy Bootstrap CSS:
</p>
<StaticExample codeText={fs.readFileSync(__dirname + '/../comparisons/vanillaButton.js', 'utf8')} />
<p>
But now that we're in Javascript, we can wrap the HTML/CSS, and provide a much better API:
</p>
<StaticExample codeText={fs.readFileSync(__dirname + '/../comparisons/noJSXButton.js', 'utf8')} />

React-Bootstrap is a library of such components, which you can also easily extend and enhance with your own functionality.
<h3>JSX Syntax</h3>
<p>
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:
</p>
<ReactPlayground show={true} codeText={fs.readFileSync(__dirname + '/../comparisons/ButtonToolbarDropdown.js', 'utf8')} />

<p>
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 <a href="http://getbootstrap.com/javascript/#dropdowns">
Bootstrap Javascript</a> and <a href="http://getbootstrap.com/components/#btn-dropdowns">Components</a> 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.
</p>
<p>
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 <a href="/components.html">components page</a>.
</p>
<p>
The project is under active development --- APIs will change, and the documentation is far from complete. Contributions are encouraged!
</p>
React.render(button, mountNode);
`}</code></pre>
</div>

<p>
But now that we're in Javascript, we can wrap the HTML/CSS,
and provide a much better API:
</p>

<div className="highlight">
<pre><code className="js">{`
var button = ReactBootstrap.Button({
bsStyle: "success",
bsSize: "large",
children: "Register"
});
React.render(button, mountNode);
`}</code></pre>
</div>

<p>
React-Bootstrap is a library of such components,
which you can also easily extend and enhance
with your own functionality.
</p>

<h3>JSX Syntax</h3>

<p>
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:
</p>

<div className="highlight">
<pre><code className="js">{`
var buttonGroupInstance = (
<ButtonGroup>
<DropdownButton bsStyle="success" title="Dropdown">
<MenuItem key="1">Dropdown link</MenuItem>
<MenuItem key="2">Dropdown link</MenuItem>
</DropdownButton>
<Button bsStyle="info">Middle</Button>
<Button bsStyle="info">Right</Button>
</ButtonGroup>
);
React.render(buttonGroupInstance, mountNode);
`}</code></pre>
</div>

<p>
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 <a
href="http://getbootstrap.com/javascript/#dropdowns">
Bootstrap Javascript</a> and <a
href="http://getbootstrap.com/components/#btn-dropdowns">
Components</a> 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.
</p>

<p>
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 <a
href="/components.html">components page</a>.
</p>
</div>
</div>
</div>
<PageFooter />
</div>
);
},

shouldComponentUpdate: function() {
return false;
<PageFooter />
</div>
);
}
});

module.exports = Page;
export default IntroductionPage;
4 changes: 4 additions & 0 deletions docs/src/NavMain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import Navbar from '../../src/Navbar';
import Nav from '../../src/Nav';

const NAV_LINKS = {
'introduction': {
link: 'introduction',
title: 'Introduction'
},
'getting-started': {
link: 'getting-started',
title: 'Getting started'
Expand Down
1 change: 1 addition & 0 deletions docs/src/Root.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const Root = React.createClass({
getPages() {
return [
'index.html',
'introduction.html',
'getting-started.html',
'components.html'
];
Expand Down
2 changes: 2 additions & 0 deletions docs/src/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';

import Root from './Root';
import HomePage from './HomePage';
import IntroductionPage from './IntroductionPage';
import GettingStartedPage from './GettingStartedPage';
import ComponentsPage from './ComponentsPage';
import NotFoundPage from './NotFoundPage';
Expand All @@ -14,6 +15,7 @@ export default (
<NotFoundRoute handler={NotFoundPage} />

<Route name='home' path='index.html' handler={HomePage} />
<Route name='introduction' path='introduction.html' handler={IntroductionPage} />
<Route name='getting-started' path='getting-started.html' handler={GettingStartedPage} />
<Route name='components' path='components.html' handler={ComponentsPage} />
</Route>
Expand Down

0 comments on commit 6ce8870

Please sign in to comment.