From 36e14d6b4c27e1dc3ac6fe9024f7603baa13574d Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Sun, 23 Feb 2014 18:58:28 -0800 Subject: [PATCH] [Docs] Consolidate the two examples sections Also made the formatting more consistent between complementary-tools and examples. --- _data/nav_docs.yml | 6 ++--- docs/09.6-update.md | 1 - docs/10-examples.md | 21 ---------------- docs/complementary-tools.md | 50 ++++++++++++++++++------------------- docs/example-apps.md | 14 ----------- docs/examples.md | 28 +++++++++++++++++++++ 6 files changed, 55 insertions(+), 65 deletions(-) delete mode 100644 docs/10-examples.md delete mode 100644 docs/example-apps.md create mode 100644 docs/examples.md diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index f4330901..41c3568c 100644 --- a/_data/nav_docs.yml +++ b/_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 diff --git a/docs/09.6-update.md b/docs/09.6-update.md index 507af254..f5239b19 100644 --- a/docs/09.6-update.md +++ b/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. diff --git a/docs/10-examples.md b/docs/10-examples.md deleted file mode 100644 index 3d999536..00000000 --- a/docs/10-examples.md +++ /dev/null @@ -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. diff --git a/docs/complementary-tools.md b/docs/complementary-tools.md index dddff115..9cd75e0f 100644 --- a/docs/complementary-tools.md +++ b/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. diff --git a/docs/example-apps.md b/docs/example-apps.md deleted file mode 100644 index f5ef7ef1..00000000 --- a/docs/example-apps.md +++ /dev/null @@ -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 diff --git a/docs/examples.md b/docs/examples.md new file mode 100644 index 00000000..cdf302c5 --- /dev/null +++ b/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.