From 6ce8870706458d2d883039aab9ca5c6bbc2f1ed6 Mon Sep 17 00:00:00 2001 From: AlexKVal Date: Wed, 6 May 2015 16:18:01 +0300 Subject: [PATCH] [added] Introduction Page. This commit is based on `git cherry-pick`s from Matthew Honnibal PR https://github.com/syllog1sm/react-bootstrap/commit/3e54374698eefe3d92948111442c00fa28021478 https://github.com/syllog1sm/react-bootstrap/commit/a7e749e2e6adfbabd57b790944cb0106cea97229 https://github.com/syllog1sm/react-bootstrap/commit/6f445568d54a235110ba754001be1bc19a9ab05b --- docs/src/ComponentsPage.js | 4 +- docs/src/IntroductionPage.js | 284 ++++++++++++++++++++++------------- docs/src/NavMain.js | 4 + docs/src/Root.js | 1 + docs/src/Routes.js | 2 + 5 files changed, 191 insertions(+), 104 deletions(-) diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index ba2dbde570..e36dedb4a7 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -129,8 +129,8 @@ const ComponentsPage = React.createClass({

Vertical variation

-

Make a set of buttons appear vertically stacked rather than horizontally. - Split button dropdowns are not supported here.

+

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Just add vertical to the {''}.

diff --git a/docs/src/IntroductionPage.js b/docs/src/IntroductionPage.js index 2a5f5664c8..810fa65bd3 100644 --- a/docs/src/IntroductionPage.js +++ b/docs/src/IntroductionPage.js @@ -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 ( +
+ + + + +
+
+
+
+

+ 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)
+                  `}
+
-var NavMain = require('./NavMain'); -var PageHeader = require('./PageHeader'); -var PageFooter = require('./PageFooter'); -var StaticExample = require('./StaticExample'); -var ReactPlayground = require('./ReactPlayground') +

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

+ +
+ 
{`
+
+                  `}
+
-var TabbedArea = require('../../cjs/TabbedArea'); -var TabPane = require('../../cjs/TabPane'); -var preStyles = {"overflow": true}; +

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

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

-                  
-
-                  

-                   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 = (
+  
+    
+      Dropdown link
+      Dropdown link
+    
+    
+    
+  
+);
+
+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. +

-
- ); - }, - - shouldComponentUpdate: function() { - return false; + +
+ ); } }); -module.exports = Page; +export default IntroductionPage; diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js index a91beb2a6d..0ade630b6f 100644 --- a/docs/src/NavMain.js +++ b/docs/src/NavMain.js @@ -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' diff --git a/docs/src/Root.js b/docs/src/Root.js index 86de7e0f71..e1b20dff03 100644 --- a/docs/src/Root.js +++ b/docs/src/Root.js @@ -21,6 +21,7 @@ const Root = React.createClass({ getPages() { return [ 'index.html', + 'introduction.html', 'getting-started.html', 'components.html' ]; diff --git a/docs/src/Routes.js b/docs/src/Routes.js index a17d356c4d..d31c5623f8 100644 --- a/docs/src/Routes.js +++ b/docs/src/Routes.js @@ -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'; @@ -14,6 +15,7 @@ export default ( +