Skip to content

Commit

Permalink
Merge pull request react-bootstrap#619 from AlexKVal/intro
Browse files Browse the repository at this point in the history 
Simple Introduction Page
  • Loading branch information
@AlexKVal
AlexKVal committed May 8, 2015
2 parents 91b30b0 + 6ce8870 commit a38c6be
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 2 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
196 changes: 196 additions & 0 deletions docs/src/IntroductionPage.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import React from 'react';

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

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>

<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>

<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"
});
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>
</div>
<PageFooter />
</div>
);
}
});

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 a38c6be

Please sign in to comment.