Skip to content
This repository was archived by the owner on Aug 5, 2022. It is now read-only.

Commit a38c6be

Browse files
AlexKValAlexKVal
committed
Merge pull request react-bootstrap#619 from AlexKVal/intro
Simple Introduction Page
2 parents 91b30b0 + 6ce8870 commit a38c6be

5 files changed

Lines changed: 205 additions & 2 deletions

File tree

‎docs/src/ComponentsPage.js‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import React from 'react';
2+
3+
import NavMain from './NavMain';
4+
import PageHeader from './PageHeader';
5+
import PageFooter from './PageFooter';
6+
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>
39+
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>
52+
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>
74+
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+
});
109+
110+
React.render(button, mountNode);
111+
`}</code></pre>
112+
</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>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
<PageFooter />
191+
</div>
192+
);
193+
}
194+
});
195+
196+
export default IntroductionPage;

‎docs/src/NavMain.js‎

Lines changed: 4 additions & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 2 additions & 0 deletions
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)