Skip to content

Commit ddbf91a

Browse files
sophiebitszpao
authored andcommitted
Flesh out reference documentation, more API info
1 parent ae95674 commit ddbf91a

17 files changed

+691
-219
lines changed

docs/Gemfile

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
source 'https://rubygems.org'
22

3+
gem 'rake'
4+
35
# jekyll, which builds it all
46
gem 'jekyll', '~>1.0'
57

docs/Gemfile.lock

+2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ GEM
3131
pygments.rb (0.5.0)
3232
posix-spawn (~> 0.3.6)
3333
yajl-ruby (~> 1.1.0)
34+
rake (10.0.4)
3435
rb-fsevent (0.9.3)
3536
redcarpet (2.2.2)
3637
safe_yaml (0.7.1)
@@ -46,6 +47,7 @@ PLATFORMS
4647
DEPENDENCIES
4748
jekyll (~> 1.0)
4849
json
50+
rake
4951
rb-fsevent
5052
redcarpet
5153
sanitize

docs/_config.yml

+16-2
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,19 @@ nav_docs_sections:
5151
title: More About Refs
5252
- id: tooling-integration
5353
title: Tooling Integration
54-
- id: reference
55-
title: Reference
54+
- id: examples
55+
title: Examples
56+
- title: Reference
57+
items:
58+
- id: top-level-api
59+
title: Top-Level API
60+
- id: component-api
61+
title: Component API
62+
- id: component-specs
63+
title: Component Specs and Lifecycle
64+
- id: tags-and-attributes
65+
title: Supported Tags and Attributes
66+
- id: events
67+
title: Event System
68+
- id: dom-differences
69+
title: DOM Differences

docs/_css/react.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,7 @@ li {
199199
font-size: 14px;
200200
// position: fixed;
201201
float: left;
202-
top: 100px;
203-
width: 180px;
202+
width: 210px;
204203

205204
ul {
206205
list-style: none;
@@ -702,4 +701,4 @@ p code {
702701
.next {
703702
float: right;
704703
}
705-
}
704+
}

docs/_posts/2013-07-23-community-roundup-5.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,4 @@ React.renderComponent(
9696
> * [Working With the Browser](/react/docs/working-with-the-browser.html)
9797
> * [More About Refs](/react/docs/more-about-refs.html)
9898
> * [Tooling integration](/react/docs/tooling-integration.html)
99-
> * [Reference](/react/docs/reference.html)
99+
> * [Reference](/react/docs/core-api.html)

docs/docs/04-multiple-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ In React, data flows from owner to owned component through `props` as discussed
144144

145145
You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.
146146

147-
However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](./reference.html) for more information.
147+
However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](component-specs.html) for more information.
148148

149149
> Note:
150150
>

docs/docs/08-tooling-integration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Tooling Integration
44
layout: docs
55
permalink: tooling-integration.html
66
prev: more-about-refs.html
7-
next: reference.html
7+
next: examples.html
88
---
99

1010
Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.

docs/docs/09-examples.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
id: examples
3+
title: Examples
4+
layout: docs
5+
permalink: examples.html
6+
prev: tooling-integration.html
7+
---
8+
9+
### Production Apps
10+
11+
* All of [Instagram.com](http://instagram.com/) is built on React.
12+
* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
13+
* [Khan Academy](http://khanacademy.org/) is using React for its question editor.
14+
15+
16+
### Sample Code
17+
18+
* We've included [a step-by-step comment box tutorial](./tutorial.html).
19+
* [The React starter kit](/react/downloads.html) includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/).
20+
* [React Page](https://github.com/facebook/react-page) is a simple React project creator to get you up-and-running quickly with React. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
21+
* [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
22+
* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.

docs/docs/09-reference.md

-209
This file was deleted.

docs/docs/ref-01-top-level-api.md

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
id: top-level-api
3+
title: Top-Level API
4+
layout: docs
5+
permalink: top-level-api.html
6+
next: component-api.html
7+
---
8+
9+
## React
10+
11+
`React` is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it.
12+
13+
14+
### React.DOM
15+
16+
`React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock.
17+
18+
19+
### React.initializeTouchEvents
20+
21+
```javascript
22+
initializeTouchEvents(boolean shouldUseTouch)
23+
```
24+
25+
Configure React's event system to handle touch events on mobile devices.
26+
27+
28+
### React.createClass
29+
30+
```javascript
31+
function createClass(object specification)
32+
```
33+
34+
Creates a component given a specification. A component implements a `render` method which returns **one single** child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.
35+
36+
For more information about the specification object, see [Component Specs and Lifecycle](component-specs.html).
37+
38+
39+
### React.renderComponent
40+
41+
```javascript
42+
ReactComponent renderComponent(
43+
ReactComponent component,
44+
DOMElement container,
45+
[function callback]
46+
)
47+
```
48+
49+
Renders a React component into the DOM in the supplied `container`.
50+
51+
If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
52+
53+
If the optional callback is provided, it will be executed after the component is rendered or updated.
54+
55+
56+
### React.unmountAndReleaseReactRootNode
57+
58+
```javascript
59+
unmountAndReleaseReactRootNode(DOMElement container)
60+
```
61+
62+
Remove a mounted React component from the DOM and clean up its event handlers and state.
63+
64+
65+
### React.renderComponentToString
66+
67+
```javascript
68+
renderComponentToString(ReactComponent component, function callback)
69+
```
70+
71+
Render a component to its initial HTML. This should only be used on the server. React will call `callback` with an HTML string when the markup is ready. You can use this method to can generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
72+
73+
If you call `React.renderComponent()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

0 commit comments

Comments
 (0)