mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[Docs] Consolidate the two examples sections
Also made the formatting more consistent between complementary-tools and examples. Conflicts: docs/_data/nav_docs.yml docs/docs/09.6-update.md
This commit is contained in:
Cheng Lou
committed by
Paul O’Shannessy
Paul O’Shannessy
parent
78cc5600fb
commit
3d4cdc36a9
@@ -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
|
||||
@@ -49,8 +49,6 @@
|
||||
title: Test Utilities
|
||||
- id: clone-with-props
|
||||
title: Cloning Components
|
||||
- id: examples
|
||||
title: Examples
|
||||
- title: Reference
|
||||
items:
|
||||
- id: top-level-api
|
||||
|
||||
@@ -4,7 +4,6 @@ title: Cloning Components
|
||||
layout: docs
|
||||
permalink: clone-with-props.html
|
||||
prev: test-utils.html
|
||||
next: examples.html
|
||||
---
|
||||
|
||||
In rare situations a component may want to change the props of a component that it doesn't own (like changing the `className` of a component passed as `this.props.children`). Other times it may want to make multiple copies of a component passed to it. `cloneWithProps()` makes this possible.
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user