diff --git a/docs/refactor/01-motivation.md b/docs/refactor/01-why-react.md similarity index 98% rename from docs/refactor/01-motivation.md rename to docs/refactor/01-why-react.md index 1068079d..a88aa990 100644 --- a/docs/refactor/01-motivation.md +++ b/docs/refactor/01-why-react.md @@ -1,4 +1,4 @@ -# Motivation / Why React? +# Why React? React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**. diff --git a/docs/refactor/04-scaling-up.md b/docs/refactor/04-multiple-components.md similarity index 99% rename from docs/refactor/04-scaling-up.md rename to docs/refactor/04-multiple-components.md index 0cbda4bf..ed5d377c 100644 --- a/docs/refactor/04-scaling-up.md +++ b/docs/refactor/04-multiple-components.md @@ -1,4 +1,4 @@ -# Scaling Up and Using Multiple Components +# Multiple components So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability. diff --git a/docs/refactor/05-building-effective-reusable-components.md b/docs/refactor/05-reusable-components.md similarity index 98% rename from docs/refactor/05-building-effective-reusable-components.md rename to docs/refactor/05-reusable-components.md index 4250332c..0c6b3f08 100644 --- a/docs/refactor/05-building-effective-reusable-components.md +++ b/docs/refactor/05-reusable-components.md @@ -1,4 +1,4 @@ -## Build reusable component libraries! +## Reusable components When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire. diff --git a/docs/refactor/07-working-with-the-browser.md b/docs/refactor/07-working-with-the-browser.md index 3ebcb08d..a36bf599 100644 --- a/docs/refactor/07-working-with-the-browser.md +++ b/docs/refactor/07-working-with-the-browser.md @@ -107,7 +107,7 @@ In addition to that philosphy, we've also taken the stance that we, as authors o * `Date.now` * `Array.prototype.some` (also in `es5-shim.js`) -All of these can be polyfilled using `es5-shim.js` from https://github.com/kriskowal/es5-shim. +All of these can be polyfilled using `es5-shim.js` from [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim). -* `console.*` - https://github.com/paulmillr/console-polyfill -* `Object.create` - Provided in `es5-sham.js` @ https://github.com/kriskowal/es5-shim +* `console.*` - [https://github.com/paulmillr/console-polyfill](https://github.com/paulmillr/console-polyfill) +* `Object.create` - Provided in `es5-sham.js` @ [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim) diff --git a/docs/refactor/08-working-with-your-environment.md b/docs/refactor/08-tooling-integration.md similarity index 98% rename from docs/refactor/08-working-with-your-environment.md rename to docs/refactor/08-tooling-integration.md index 1f5b55bf..38afed78 100644 --- a/docs/refactor/08-working-with-your-environment.md +++ b/docs/refactor/08-tooling-integration.md @@ -1,4 +1,4 @@ -# Working with your environment +# Tooling integration Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible. diff --git a/docs/refactor/09-reference.md b/docs/refactor/09-reference.md index e0bea14f..acde7d3c 100644 --- a/docs/refactor/09-reference.md +++ b/docs/refactor/09-reference.md @@ -1,5 +1,22 @@ # Reference +## Examples + +### 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 its question editor. + +### Sample code + +* We've included **[a step-by-step comment box tutorial](./09.1-tutorial.md)** +* There is also [a simple LikeButton tutorial](./likebutton/) +* [The React starter kit](/react/downloads.md) includes several examples which you can [view online in our GitHub repo](https://github.com/facebook/react/tree/master/examples/) +* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React. +* [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. + ## API ### React @@ -154,12 +171,3 @@ React has implemented a browser-independent events and DOM system for performanc * All event objects conform to the W3C spec * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here, since the spec is inconsistent. * `onChange` behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. - -## Examples - -* React powers all of Instagram.com and many components on Facebook.com, including the commenting interface, ads creation flows, and page insights. -* We've included [a step-by-step tutorial](./09.1-tutorial.md) for creating a comment box widget with React -* [The React starter kit](/react/downloads.md) includes several examples which you can [view online in our GitHub repo](https://github.com/facebook/react/tree/master/examples/) -* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React. -* [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. \ No newline at end of file diff --git a/docs/refactor/09.1-tutorial.md b/docs/refactor/09.1-tutorial.md index 2daf7279..3a90c822 100644 --- a/docs/refactor/09.1-tutorial.md +++ b/docs/refactor/09.1-tutorial.md @@ -1,10 +1,4 @@ ---- -id: docs-tutorial -title: Tutorial -layout: docs -prev: getting-started.html -next: common-questions.html ---- +# Tutorial We'll be building a simple, but realistic comments box that you can drop into a blog, similar to Disqus, LiveFyre or Facebook comments. diff --git a/docs/refactor/build.py b/docs/refactor/build.py new file mode 100644 index 00000000..b63e5851 --- /dev/null +++ b/docs/refactor/build.py @@ -0,0 +1,63 @@ +import glob +import os + +def build_header(id, title, prev, next): + prevtext = nexttext = '' + if prev: + prevtext = 'prev: ' + prev + '\n' + if next: + nexttext = 'next: ' + next + '\n' + return '''--- +id: %s +title: %s +layout: docs +%s%s---''' % (id, title, prevtext, nexttext) + +def sanitize(content): + title,content = content.split('\n', 1) + title = title[2:].strip() + return title,content.replace('# ', '## ').strip() + +def get_dest(filename): + return os.path.join(os.path.dirname(filename), '..', os.path.basename(filename)) + +def relative_html(filename): + if not filename: + return None + return os.path.splitext(os.path.basename(filename))[0] + '.html' + +def generate_nav_item(filename, title): + basename = os.path.splitext(os.path.basename(filename))[0] + return '
  • %s
  • \n' % (basename, basename, title) + +def main(): + docs = [None] + glob.glob(os.path.join(os.path.dirname(os.path.abspath(__file__)), '*.md'))[:-1] + [None] + nav = ''' +''' + items = '' + for i in xrange(1, len(docs) - 1): + prev = relative_html(docs[i - 1]) + next = relative_html(docs[i + 1]) + with open(docs[i], 'r') as src, open(get_dest(docs[i]), 'w') as dest: + title,content = sanitize(src.read()) + header = build_header( + os.path.splitext(os.path.basename(docs[i]))[0], + title, + prev, + next + ) + dest.write(header + '\n' + content) + if docs[i].count('.') == 1: + items += generate_nav_item(docs[i], title) + with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', '..', '_includes', 'nav_docs.html'), 'w') as f: + f.write(nav % items) + +if __name__ == '__main__': + main()