@samitouri / QOS-React-2 / commits / 445a0dac37

Fork 0

The library for web and native user interfaces.

tweak the source

petehunt committed Jul 14, 2013 at 18:25 UTC 445a0dac37be59dba3d9c5190d1cc9ff8a85f479

8 files changed +88 -23

docs/docs/refactor/01-why-react.md renamed

+1 -1

@@ -1,4 +1,4 @@

1 -# Motivation / Why React?

1 +# Why React?

3 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)**.

docs/docs/refactor/04-multiple-components.md renamed

+1 -1

@@ -1,4 +1,4 @@

1 -# Scaling Up and Using Multiple Components

1 +# Multiple components

3 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.

docs/docs/refactor/05-reusable-components.md renamed

+1 -1

@@ -1,4 +1,4 @@

1 -## Build reusable component libraries!

1 +## Reusable components

3 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.

docs/docs/refactor/07-working-with-the-browser.md

+3 -3

@@ -107,7 +107,7 @@ In addition to that philosphy, we've also taken the stance that we, as authors o

107 * `Date.now`

108 * `Array.prototype.some` (also in `es5-shim.js`)

109

110 -All of these can be polyfilled using `es5-shim.js` from https://github.com/kriskowal/es5-shim.

110 +All of these can be polyfilled using `es5-shim.js` from [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim).

111

112 -* `console.*` - https://github.com/paulmillr/console-polyfill

113 -* `Object.create` - Provided in `es5-sham.js` @ https://github.com/kriskowal/es5-shim

112 +* `console.*` - [https://github.com/paulmillr/console-polyfill](https://github.com/paulmillr/console-polyfill)

113 +* `Object.create` - Provided in `es5-sham.js` @ [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim)

docs/docs/refactor/08-tooling-integration.md renamed

+1 -1

@@ -1,4 +1,4 @@

1 -# Working with your environment

1 +# Tooling integration

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

docs/docs/refactor/09-reference.md

+17 -9

@@ -1,5 +1,22 @@

1 # Reference

3 +## Examples

4 +

5 +### Production apps

6 +

7 +* All of [Instagram.com](http://instagram.com/) is built on React.

8 +* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.

9 +* [Khan Academy](http://khanacademy.org/) is using React for its question editor.

10 +

11 +### Sample code

12 +

13 +* We've included **[a step-by-step comment box tutorial](./09.1-tutorial.md)**

14 +* There is also [a simple LikeButton tutorial](./likebutton/)

15 +* [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/)

16 +* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React.

17 +* [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!)

18 +* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.

19 +

20 ## API

22 ### React

@@ -154,12 +171,3 @@ React has implemented a browser-independent events and DOM system for performanc

171 * All event objects conform to the W3C spec

172 * 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.

173 * `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.

157 -

158 -## Examples

159 -

160 -* React powers all of Instagram.com and many components on Facebook.com, including the commenting interface, ads creation flows, and page insights.

161 -* We've included [a step-by-step tutorial](./09.1-tutorial.md) for creating a comment box widget with React

162 -* [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/)

163 -* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React.

164 -* [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!)

165 -* [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

docs/docs/refactor/09.1-tutorial.md

+1 -7

@@ -1,10 +1,4 @@

1 ----

2 -id: docs-tutorial

3 -title: Tutorial

4 -layout: docs

5 -prev: getting-started.html

6 -next: common-questions.html

7 ----

1 +# Tutorial

3 We'll be building a simple, but realistic comments box that you can drop into a blog, similar to Disqus, LiveFyre or Facebook comments.

docs/docs/refactor/build.py new

+63

@@ -0,0 +1,63 @@

1 +import glob

2 +import os

3 +

4 +def build_header(id, title, prev, next):

5 + prevtext = nexttext = ''

6 + if prev:

7 + prevtext = 'prev: ' + prev + '\n'

8 + if next:

9 + nexttext = 'next: ' + next + '\n'

10 + return '''---

11 +id: %s

12 +title: %s

13 +layout: docs

14 +%s%s---''' % (id, title, prevtext, nexttext)

15 +

16 +def sanitize(content):

17 + title,content = content.split('\n', 1)

18 + title = title[2:].strip()

19 + return title,content.replace('# ', '## ').strip()

20 +

21 +def get_dest(filename):

22 + return os.path.join(os.path.dirname(filename), '..', os.path.basename(filename))

23 +

24 +def relative_html(filename):

25 + if not filename:

26 + return None

27 + return os.path.splitext(os.path.basename(filename))[0] + '.html'

28 +

29 +def generate_nav_item(filename, title):

30 + basename = os.path.splitext(os.path.basename(filename))[0]

31 + return ' <li><a href="/react/docs/%s.html"{%% if page.id == \'%s\' %%} class="active"{%% endif %%}>%s</a></li>\n' % (basename, basename, title)

32 +

33 +def main():

34 + docs = [None] + glob.glob(os.path.join(os.path.dirname(os.path.abspath(__file__)), '*.md'))[:-1] + [None]

35 + nav = '''

36 +<div class="nav-docs">

37 + <div class="nav-docs-section">

38 + <h3>React documentation</h3>

39 + <ul>

40 +%s

41 + </ul>

42 + </div>

43 +</div>'''

44 + items = ''

45 + for i in xrange(1, len(docs) - 1):

46 + prev = relative_html(docs[i - 1])

47 + next = relative_html(docs[i + 1])

48 + with open(docs[i], 'r') as src, open(get_dest(docs[i]), 'w') as dest:

49 + title,content = sanitize(src.read())

50 + header = build_header(

51 + os.path.splitext(os.path.basename(docs[i]))[0],

52 + title,

53 + prev,

54 + next

55 + )

56 + dest.write(header + '\n' + content)

57 + if docs[i].count('.') == 1:

58 + items += generate_nav_item(docs[i], title)

59 + with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', '..', '_includes', 'nav_docs.html'), 'w') as f:

60 + f.write(nav % items)

61 +

62 +if __name__ == '__main__':

63 + main()