Browse Source

[Docs] Consolidate the two examples sections

Also made the formatting more consistent between complementary-tools and
examples.
main
Cheng Lou 11 years ago
parent
commit
36e14d6b4c
  1. 6
      _data/nav_docs.yml
  2. 1
      docs/09.6-update.md
  3. 21
      docs/10-examples.md
  4. 50
      docs/complementary-tools.md
  5. 14
      docs/example-apps.md
  6. 28
      docs/examples.md

6
_data/nav_docs.yml

@ -8,8 +8,8 @@
title: Videos
- id: complementary-tools
title: Complementary Tools
- id: example-apps
title: Example Apps
- id: examples
title: Examples
- title: Guides
items:
- id: why-react
@ -51,8 +51,6 @@
title: Cloning Components
- id: update
title: Immutability Helpers
- id: examples
title: Examples
- title: Reference
items:
- id: top-level-api

1
docs/09.6-update.md

@ -4,7 +4,6 @@ title: Immutability Helpers
layout: docs
permalink: update.html
prev: clone-with-props.html
next: examples.html
---
React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast `shouldComponentUpdate()` method to significantly speed up your app.

21
docs/10-examples.md

@ -1,21 +0,0 @@
---
id: examples
title: Examples
layout: docs
permalink: examples.html
prev: class-name-manipulation.html
---
### Production Apps
* All of [Instagram.com](http://instagram.com/) is built on React.
* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
* [Khan Academy](http://khanacademy.org/) is using React for most new JS development.
### Sample Code
* We've included [a step-by-step comment box tutorial](/react/docs/tutorial.html).
* [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/).
* [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!)
* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.

50
docs/complementary-tools.md

@ -4,7 +4,7 @@ title: Complementary Tools
layout: docs
permalink: complementary-tools.html
prev: videos.html
next: example-apps.html
next: examples.html
---
React is a small library that does one thing well. Here's a list of tools we've found that work really well with React when building applications.
@ -13,36 +13,36 @@ If you want your project on this list, or think one of these projects should be
### JSX integrations
* **[jsxhint](https://npmjs.org/package/jsxhint)** [JSHint](http://jshint.com/) (linting) support
* **[reactify](https://npmjs.org/package/reactify)** [Browserify](http://browserify.org/) transform
* **[node-jsx](https://npmjs.org/package/node-jsx)** Native [Node](http://nodejs.org/) support
* **[jsx-loader](https://npmjs.org/package/jsx-loader)** Loader for [webpack](http://webpack.github.io/)
* **[grunt-react](https://npmjs.org/package/grunt-react)** [GruntJS](http://gruntjs.com/) task
* **[gulp-react](https://npmjs.org/package/gulp-react)** [GulpJS](http://gulpjs.com/) plugin
* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin)** [RequireJS](http://requirejs.org/) plugin
* **[react-meteor](https://github.com/benjamn/react-meteor)** [Meteor](http://www.meteor.com/) plugin
* **[jsxhint](https://npmjs.org/package/jsxhint)** [JSHint](http://jshint.com/) (linting) support.
* **[reactify](https://npmjs.org/package/reactify)** [Browserify](http://browserify.org/) transform.
* **[node-jsx](https://npmjs.org/package/node-jsx)** Native [Node](http://nodejs.org/) support.
* **[jsx-loader](https://npmjs.org/package/jsx-loader)** Loader for [webpack](http://webpack.github.io/).
* **[grunt-react](https://npmjs.org/package/grunt-react)** [GruntJS](http://gruntjs.com/) task.
* **[gulp-react](https://npmjs.org/package/gulp-react)** [GulpJS](http://gulpjs.com/) plugin.
* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin)** [RequireJS](http://requirejs.org/) plugin.
* **[react-meteor](https://github.com/benjamn/react-meteor)** [Meteor](http://www.meteor.com/) plugin.
### Full-stack starter kits
* **[react-quickstart](https://github.com/andreypopp/react-quickstart)** Quick-start template for `express`, `browserify`, `react-router-component` and `react-async` (**includes "isomorphic" server rendering**)
* **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack)** [Yeoman](http://yeoman.io/) generator for React and Webpack
* **[Genesis Skeleton](http://genesis-skeleton.com/)** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React)
* **[react-starter-template](https://github.com/johnthethird/react-starter-template)** Starter template with Gulp, Webpack and Bootstrap
* **[react-brunch](https://npmjs.org/package/react-brunch)** [Brunch](http://brunch.io/) plugin
* **[react-browserify-template](https://github.com/petehunt/react-browserify-template)** Quick-start with Browserify
* **[react-quickstart](https://github.com/andreypopp/react-quickstart)** Quick-start template for `express`, `browserify`, `react-router-component and `react-async` (**includes "isomorphic" server rendering**).
* **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack)** [Yeoman](http://yeoman.io/) generator for React and Webpack.
* **[Genesis Skeleton](http://genesis-skeleton.com/)** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React).
* **[react-starter-template](https://github.com/johnthethird/react-starter-template)** Starter template with Gulp, Webpack and Bootstrap.
* **[react-brunch](https://npmjs.org/package/react-brunch)** [Brunch](http://brunch.io/) plugin.
* **[react-browserify-template](https://github.com/petehunt/react-browserify-template)** Quick-start with Browserify.
### Routing
* **[director](https://github.com/flatiron/director)** (for an example see [TodoMVC](https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/react/js/app.jsx#L29))
* **[Backbone](http://backbonejs.org/)** (for an example see [github-issues-viewer](https://github.com/jaredly/github-issues-viewer))
* **[react-router](https://github.com/jaredly/react-router)** (example coming soon)
* **[director](https://github.com/flatiron/director)** (For an example see [TodoMVC](https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/react/js/app.jsx#L29)).
* **[Backbone](http://backbonejs.org/)** (For an example see [github-issues-viewer](https://github.com/jaredly/github-issues-viewer)).
* **[react-router](https://github.com/jaredly/react-router)** (Example coming soon).
* **[react-router-component](http://andreypopp.viewdocs.io/react-router-component)**
### Model management
* **[react.backbone](https://github.com/usepropeller/react.backbone)** Use [Backbone](http://backbonejs.org) models with React
* **[cortex](https://github.com/mquan/cortex/)** A JavaScript library for centrally managing data with React
* **[avers](https://github.com/wereHamster/avers)** A modern client-side model abstraction library
* **[react.backbone](https://github.com/usepropeller/react.backbone)** Use [Backbone](http://backbonejs.org) models with React.
* **[cortex](https://github.com/mquan/cortex/)** A JavaScript library for centrally managing data with React.
* **[avers](https://github.com/wereHamster/avers)** A modern client-side model abstraction library.
### Data fetching
@ -51,7 +51,7 @@ If you want your project on this list, or think one of these projects should be
### UI components
* **[react-bootstrap](https://github.com/stevoland/react-bootstrap)** Bootstrap 3 components built with React
* **[react-topcoat](https://github.com/plaxdan/react-topcoat)** Topcoat components built with React
* **[react-lorem-component](https://github.com/martinandert/react-lorem-component)** Lorem Ipsum placeholder component
* **[wingspan-forms](https://github.com/wingspan/wingspan-forms)** React library for dynamic forms & grids; widgets provided by KendoUI
* **[react-bootstrap](https://github.com/stevoland/react-bootstrap)** Bootstrap 3 components built with React.
* **[react-topcoat](https://github.com/plaxdan/react-topcoat)** Topcoat components built with React.
* **[react-lorem-component](https://github.com/martinandert/react-lorem-component)** Lorem Ipsum placeholder component.
* **[wingspan-forms](https://github.com/wingspan/wingspan-forms)** React library for dynamic forms & grids; widgets provided by KendoUI.

14
docs/example-apps.md

@ -1,14 +0,0 @@
---
id: example-apps
title: Example apps
layout: docs
permalink: example-apps.html
prev: complementary-tools.html
---
Here is a selection of open-source apps built with React.
* **[TodoMVC](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react/js)**
* **[Khan Academy question editor](https://github.com/khan/perseus)** (browse their GitHub account for many more production apps!)
* **[github-issues-viewer](https://github.com/jaredly/github-issues-viewer)**
* **[hn-react](https://github.com/prabirshrestha/hn-react)** Dead-simple Hacker News client in React

28
docs/examples.md

@ -0,0 +1,28 @@
---
id: examples
title: Examples
layout: docs
permalink: examples.html
prev: complementary-tools.html
---
### Production Apps
* **[Instagram.com](http://instagram.com/)** Is 100% built on React.
* **[Facebook.com](http://www.facebook.com/)** 's commenting interface, ads creation flows, and page insights.
* **[Khan Academy](http://khanacademy.org/)** Uses React for most new JS development.
### Sample Code
* **[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/).
* **[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!
* **[Rendr + React app template](https://github.com/petehunt/rendr-react-template/)** Demonstrates how to use React's server rendering capabilities.
### Open-Source Demos
* **[TodoMVC](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react/js)**
* **[Khan Academy question editor](https://github.com/khan/perseus)** (Browse their GitHub account for many more production apps!)
* **[github-issue-viewer](https://github.com/jaredly/github-issues-viewer)**
* **[hn-react](https://github.com/prabirshrestha/hn-react)** Dead-simple Hacker News client.
Loading…
Cancel
Save