The library for web and native user interfaces.
First two sections of newdocs
petehunt committed
Jul 9, 2013 at 11:36 UTC
462e450bb334e27a634bb3667fb4466dd4708338
3 files changed
+138
docs/docs/refactor/00-table-of-contents.md
new
+59
@@ -0,0 +1,59 @@
1
+Motivation / Why React?
2
+- Declarative (simple)
3
+- Components (separation of concerns)
4
+- Give it 5 minutes
5
+
6
+Displaying data
7
+- Hello world example
8
+- Reactive updates
9
+- JSX syntax (link to separate doc?)
10
+
11
+Handling user input
12
+- Click handler example
13
+- Event handlers / synthetic events (link to w3c docs)
14
+- Under the hood: autoBind and event delegation (IE8 notes)
15
+- How state works
16
+- What should go in state?
17
+
18
+Scaling up: using multiple components
19
+- Motivation: separate concerns
20
+- Composition example
21
+- Handling events
22
+- A note on performance
23
+- You should build a reusable component library (CSS, testing etc)
24
+- Mixins
25
+- Testing
26
+
27
+Forms
28
+- TODO list example
29
+- How to think about Reactive forms
30
+- New form events and properties
31
+
32
+Touching the DOM
33
+- Refs / getDOMNode()
34
+- Component lifecycle
35
+
36
+Integrating with other UI libraries
37
+- Using jQuery plugins
38
+- Letting jQuery manage React components
39
+- Using with Backbone.View
40
+- CoffeeScript
41
+- Moving from Handlebars to React: an example
42
+
43
+Server / static rendering
44
+- Motivation
45
+- Simple example
46
+- How does it work? (No DOM)
47
+- Rendr + React
48
+
49
+Big ideas
50
+- Animation
51
+- Bootstrap bindings (responsive grids)
52
+- Reactive CSS
53
+- Web workers
54
+
55
+Case studies
56
+- Comment box tutorial from scratch
57
+- From HTML mock to application: React one-hour email
58
+
59
+API reference
docs/docs/refactor/01-motivation.md
new
+19
@@ -0,0 +1,19 @@
1
+# Motivation / Why React?
2
+
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)**.
4
+
5
+We built React to solve one problem: **building large applications with data that changes over time**. To do this, React has two main ideas:
6
+
7
+## Stay simple and declarative
8
+
9
+React apps are easy to write. Simply express how the UI should look at any given point in time, and React will manage all UI updates for you when your underlying data changes.
10
+
11
+It's just like writing a server-rendered web app: when the data changes, it's like React just hits the refresh button, except React is very fast and maintains the state of your UI.
12
+
13
+## Build composable components
14
+
15
+React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
16
+
17
+## Give it five minutes
18
+
19
+React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. We ask that you [give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading about React; we've built thousands of components with engineers and designers at Facebook and Instagram, and we hope you'll find it useful!
docs/docs/refactor/02-displaying-data.md
new
+60
@@ -0,0 +1,60 @@
1
+# Displaying data
2
+
3
+The most basic thing you can do with a UI is display some data. React makes it easy to display data, and automatically keeps it up-to-date when the data changes.
4
+
5
+## Getting started
6
+
7
+Let's look at a really simple example. Create a `hello-react.html` file with the following code:
8
+
9
+```html
10
+<!DOCTYPE html>
11
+<html>
12
+ <head>
13
+ <title>Hello React</title>
14
+ <script src="http://fb.me/react-0.4.0.min.js"></script>
15
+ <script src="http://fb.me/JSXTransformer-0.4.0.js"></script>
16
+ </head>
17
+ <body>
18
+ <div id="example"></div>
19
+ <script type="text/jsx">
20
+
21
+ // ** Your code goes here! **
22
+
23
+ </script>
24
+ </body>
25
+</html>
26
+```
27
+
28
+For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
29
+
30
+```javascript
31
+/** @jsx React.DOM */
32
+
33
+var HelloWorld = React.createClass({
34
+ render: function() {
35
+ return (
36
+ <p>
37
+ Hello, <input type="text" placeholder="Your name here" />!
38
+ It is {this.props.date.toTimeString()}
39
+ </p>
40
+ );
41
+ }
42
+});
43
+
44
+setInterval(function() {
45
+ React.renderComponent(
46
+ <HelloWorld date={new Date()} />,
47
+ document.getElementById('example')
48
+ );
49
+}, 500);
50
+```
51
+
52
+## Reactive updates
53
+
54
+View the finished code in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI -- any input you put in the text field remains, even though the code is written in a declarative way.
55
+
56
+## JSX syntax
57
+
58
+We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
59
+
60
+We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a *very* simple, **optional** HTML-like syntax for the function calls that generate markup called JSX. See [the JSX syntax documentation](syntax.html) for more information.
\ No newline at end of file