Skip to content

Commit 6ce8870

Browse files
AlexKValAlexKVal
committed
[added] Introduction Page.
This commit is based on `git cherry-pick`s from Matthew Honnibal PR syllog1sm@3e54374 syllog1sm@a7e749e syllog1sm@6f44556
1 parent a04e23a commit 6ce8870

File tree

5 files changed

+191
-104
lines changed

5 files changed

+191
-104
lines changed

‎docs/src/ComponentsPage.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@ const ComponentsPage = React.createClass({
129129
<ReactPlayground codeText={Samples.ButtonGroupNested} />
130130

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

‎docs/src/IntroductionPage.js

+182-102
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,196 @@
1-
/** @jsx React.DOM */
1+
import React from 'react';
22

3-
'use strict';
3+
import NavMain from './NavMain';
4+
import PageHeader from './PageHeader';
5+
import PageFooter from './PageFooter';
46

5-
var React = require('react');
6-
var fs = require('fs');
7+
const IntroductionPage = React.createClass({
8+
render: function () {
9+
return (
10+
<div>
11+
<NavMain activePage="introduction" />
12+
13+
<PageHeader
14+
title="Introduction"
15+
subTitle="The most popular front-end framework, rebuilt for React."/>
16+
17+
<div className="container bs-docs-container">
18+
<div className="row">
19+
<div className="col-md-9" role="main">
20+
<div className="bs-docs-section">
21+
<p className="lead">
22+
React-Bootstrap is a library of reuseable front-end components.
23+
You'll get the look-and-feel of Twitter Bootstrap,
24+
but with much cleaner code, via Facebook's React.js framework.
25+
</p>
26+
27+
<p>
28+
Let's say you want a small button that says "Something",
29+
to trigger the function someCallback.
30+
If you were writing a native application,
31+
you might write something like:
32+
</p>
33+
34+
<div className="highlight">
35+
<pre><code className="js">{`
36+
button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
37+
`}</code></pre>
38+
</div>
739

8-
var NavMain = require('./NavMain');
9-
var PageHeader = require('./PageHeader');
10-
var PageFooter = require('./PageFooter');
11-
var StaticExample = require('./StaticExample');
12-
var ReactPlayground = require('./ReactPlayground')
40+
<p>
41+
With the most popular web front-end framework,
42+
Twitter Bootstrap, you'd write this in your HTML:
43+
</p>
44+
45+
<div className="highlight">
46+
<pre><code className="js">{`
47+
<button id="something-btn" type="button" class="btn btn-success btn-sm">
48+
Something
49+
</button>
50+
`}</code></pre>
51+
</div>
1352

53+
<p>
54+
And something like
55+
<code className="js">
56+
$('#something-btn').click(someCallback);
57+
</code>
58+
in your Javascript.
59+
</p>
60+
61+
<p>
62+
By web standards this is quite nice,
63+
but it's still quite nasty.
64+
React-Bootstrap lets you write this:
65+
</p>
66+
67+
<div className="highlight">
68+
<pre><code className="js">{`
69+
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
70+
Something
71+
</Button>
72+
`}</code></pre>
73+
</div>
1474

15-
var TabbedArea = require('../../cjs/TabbedArea');
16-
var TabPane = require('../../cjs/TabPane');
17-
var preStyles = {"overflow": true};
75+
<p>
76+
The HTML/CSS implementation details are abstracted away,
77+
leaving you with an interface that more closely resembles
78+
what you would expect to write in other programming languages.
79+
</p>
80+
81+
<h2>A better Bootstrap API using React.js</h2>
82+
83+
<p>
84+
The Bootstrap code is so repetitive because HTML and CSS
85+
do not support the abstractions necessary for a nice library
86+
of components. That's why we have to write <code>btn</code>
87+
three times, within an element called <code>button</code>.
88+
</p>
89+
90+
<p>
91+
<strong>
92+
The React.js solution is to write directly in Javascript.
93+
</strong> React takes over the page-rendering entirely.
94+
You just give it a tree of Javascript objects,
95+
and tell it how state is transmitted between them.
96+
</p>
97+
98+
<p>
99+
For instance, we might tell React to render a page displaying
100+
a single button, styled using the handy Bootstrap CSS:
101+
</p>
102+
103+
<div className="highlight">
104+
<pre><code className="js">{`
105+
var button = React.DOM.button({
106+
className: "btn btn-lg btn-success",
107+
children: "Register"
108+
});
18109
19-
var Page = React.createClass({
20-
render: function () {
21-
return (
22-
<div>
23-
<NavMain activePage="introduction" />
24-
25-
<PageHeader
26-
title="Introduction"
27-
subTitle="The most popular front-end framework, rebuilt for React."/>
28-
29-
<div className="container bs-docs-container">
30-
<div className="row">
31-
<div className="col-md-9" role="main">
32-
<div className="bs-docs-section">
33-
<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.
34-
</p>
35-
<p>
36-
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:
37-
</p>
38-
{StaticExample({codeText: 'button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)'})}
39-
<p>
40-
With the most popular web front-end framework, Twitter Bootstrap, you'd write this in your HTML:
41-
</p>
42-
{StaticExample({codeText: '<button id="something-btn" type="button" class="btn btn-success btn-sm">\n\tSomething\n</button>'})}
43-
<p>
44-
And something like <code>$('#something-btn').click(someCallback);</code> in your Javascript.
45-
By web standards this is quite nice, but it's still quite nasty. React-Bootstrap lets you write this:
46-
</p>
47-
{StaticExample({codeText: '<Button bsStyle="success" bsSize="small" onClick={someCallback}>\n\tSomething\n</Button>'})}
48-
49-
<p>
50-
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.
51-
</p>
52-
<p>
53-
Here's a more complicated example: a tabbed navigation area, showing the implementation with Bootstrap, and React-Bootstrap:
54-
</p>
55-
56-
<TabbedArea defaultActiveKey={2}>
57-
<TabPane key={1} tab="With Bootstrap">
58-
<pre>{fs.readFileSync(__dirname + '/../comparisons/TabbedAreaBS.html', 'utf8')}</pre>
59-
</TabPane>
60-
<TabPane key={2} tab="With React-Bootstrap">
61-
<pre>{fs.readFileSync(__dirname + '/../comparisons/TabbedAreaRBS.jsx', 'utf8')}</pre>
62-
</TabPane>
63-
</TabbedArea>
64-
65-
<h2>A better Bootstrap API using React.js</h2>
66-
<p>
67-
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>.
68-
</p>
69-
70-
<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>
71-
72-
<p>For instance, we might tell React to render a page displaying a single button, styled using the handy Bootstrap CSS:
73-
</p>
74-
<StaticExample codeText={fs.readFileSync(__dirname + '/../comparisons/vanillaButton.js', 'utf8')} />
75-
<p>
76-
But now that we're in Javascript, we can wrap the HTML/CSS, and provide a much better API:
77-
</p>
78-
<StaticExample codeText={fs.readFileSync(__dirname + '/../comparisons/noJSXButton.js', 'utf8')} />
79-
80-
React-Bootstrap is a library of such components, which you can also easily extend and enhance with your own functionality.
81-
<h3>JSX Syntax</h3>
82-
<p>
83-
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:
84-
</p>
85-
<ReactPlayground show={true} codeText={fs.readFileSync(__dirname + '/../comparisons/ButtonToolbarDropdown.js', 'utf8')} />
86-
87-
<p>
88-
Some people's first impression of React.js is that it seems messy to mix Javascript and HTML in this way.
89-
However, compare the code required to add
90-
91-
a dropdown button in the example above to the <a href="http://getbootstrap.com/javascript/#dropdowns">
92-
Bootstrap Javascript</a> and <a href="http://getbootstrap.com/components/#btn-dropdowns">Components</a> documentation for creating a dropdown button.
93-
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.
94-
</p>
95-
<p>
96-
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.
97-
View the current React-Bootstrap library on the <a href="/components.html">components page</a>.
98-
</p>
99-
<p>
100-
The project is under active development --- APIs will change, and the documentation is far from complete. Contributions are encouraged!
101-
</p>
110+
React.render(button, mountNode);
111+
`}</code></pre>
102112
</div>
113+
114+
<p>
115+
But now that we're in Javascript, we can wrap the HTML/CSS,
116+
and provide a much better API:
117+
</p>
118+
119+
<div className="highlight">
120+
<pre><code className="js">{`
121+
var button = ReactBootstrap.Button({
122+
bsStyle: "success",
123+
bsSize: "large",
124+
children: "Register"
125+
});
126+
127+
React.render(button, mountNode);
128+
`}</code></pre>
129+
</div>
130+
131+
<p>
132+
React-Bootstrap is a library of such components,
133+
which you can also easily extend and enhance
134+
with your own functionality.
135+
</p>
136+
137+
<h3>JSX Syntax</h3>
138+
139+
<p>
140+
While each React component is really just a Javascript object,
141+
writing tree-structures that way gets tedious.
142+
React encourages the use of a syntactic-sugar called JSX,
143+
which lets you write the tree in an HTML-like syntax:
144+
</p>
145+
146+
<div className="highlight">
147+
<pre><code className="js">{`
148+
var buttonGroupInstance = (
149+
<ButtonGroup>
150+
<DropdownButton bsStyle="success" title="Dropdown">
151+
<MenuItem key="1">Dropdown link</MenuItem>
152+
<MenuItem key="2">Dropdown link</MenuItem>
153+
</DropdownButton>
154+
<Button bsStyle="info">Middle</Button>
155+
<Button bsStyle="info">Right</Button>
156+
</ButtonGroup>
157+
);
158+
159+
React.render(buttonGroupInstance, mountNode);
160+
`}</code></pre>
161+
</div>
162+
163+
<p>
164+
Some people's first impression of React.js is that it seems
165+
messy to mix Javascript and HTML in this way.
166+
However, compare the code required to add
167+
a dropdown button in the example above to the <a
168+
href="http://getbootstrap.com/javascript/#dropdowns">
169+
Bootstrap Javascript</a> and <a
170+
href="http://getbootstrap.com/components/#btn-dropdowns">
171+
Components</a> documentation for creating a dropdown button.
172+
The documentation is split in two because
173+
you have to implement the component in two places
174+
in your code: first you must add the HTML/CSS elements,
175+
and then you must call some Javascript setup
176+
code to wire the component together.
177+
</p>
178+
179+
<p>
180+
The React-Bootstrap component library tries to follow
181+
the React.js philosophy that a single piece of functionality
182+
should be defined in a single place.
183+
View the current React-Bootstrap library on the <a
184+
href="/components.html">components page</a>.
185+
</p>
103186
</div>
104187
</div>
105188
</div>
106-
<PageFooter />
107189
</div>
108-
);
109-
},
110-
111-
shouldComponentUpdate: function() {
112-
return false;
190+
<PageFooter />
191+
</div>
192+
);
113193
}
114194
});
115195

116-
module.exports = Page;
196+
export default IntroductionPage;

‎docs/src/NavMain.js

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import Navbar from '../../src/Navbar';
44
import Nav from '../../src/Nav';
55

66
const NAV_LINKS = {
7+
'introduction': {
8+
link: 'introduction',
9+
title: 'Introduction'
10+
},
711
'getting-started': {
812
link: 'getting-started',
913
title: 'Getting started'

‎docs/src/Root.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const Root = React.createClass({
2121
getPages() {
2222
return [
2323
'index.html',
24+
'introduction.html',
2425
'getting-started.html',
2526
'components.html'
2627
];

‎docs/src/Routes.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import Root from './Root';
44
import HomePage from './HomePage';
5+
import IntroductionPage from './IntroductionPage';
56
import GettingStartedPage from './GettingStartedPage';
67
import ComponentsPage from './ComponentsPage';
78
import NotFoundPage from './NotFoundPage';
@@ -14,6 +15,7 @@ export default (
1415
<NotFoundRoute handler={NotFoundPage} />
1516

1617
<Route name='home' path='index.html' handler={HomePage} />
18+
<Route name='introduction' path='introduction.html' handler={IntroductionPage} />
1719
<Route name='getting-started' path='getting-started.html' handler={GettingStartedPage} />
1820
<Route name='components' path='components.html' handler={ComponentsPage} />
1921
</Route>

0 commit comments

Comments
 (0)