First two sections of newdocs

12 years ago · 34a4ecaddf
3 changed files with 138 additions and 0 deletions
--- a/docs/refactor/00-table-of-contents.md
+++ b/docs/refactor/00-table-of-contents.md
@ -0,0 +1,59 @@
+Motivation / Why React?
+- Declarative (simple)
+- Components (separation of concerns)
+- Give it 5 minutes
+
+Displaying data
+- Hello world example
+- Reactive updates
+- JSX syntax (link to separate doc?)
+
+Handling user input
+- Click handler example
+- Event handlers / synthetic events (link to w3c docs)
+- Under the hood: autoBind and event delegation (IE8 notes)
+- How state works
+- What should go in state?
+
+Scaling up: using multiple components
+- Motivation: separate concerns
+- Composition example
+- Handling events
+- A note on performance
+- You should build a reusable component library (CSS, testing etc)
+- Mixins
+- Testing
+
+Forms
+- TODO list example
+- How to think about Reactive forms
+- New form events and properties
+
+Touching the DOM
+- Refs / getDOMNode()
+- Component lifecycle
+
+Integrating with other UI libraries
+- Using jQuery plugins
+- Letting jQuery manage React components
+- Using with Backbone.View
+- CoffeeScript
+- Moving from Handlebars to React: an example
+
+Server / static rendering
+- Motivation
+- Simple example
+- How does it work? (No DOM)
+- Rendr + React
+
+Big ideas
+- Animation
+- Bootstrap bindings (responsive grids)
+- Reactive CSS
+- Web workers
+
+Case studies
+- Comment box tutorial from scratch
+- From HTML mock to application: React one-hour email
+
+API reference
--- a/docs/refactor/01-motivation.md
+++ b/docs/refactor/01-motivation.md
@ -0,0 +1,19 @@
+# Motivation / 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)**.
+
+We built React to solve one problem: **building large applications with data that changes over time**. To do this, React has two main ideas:
+
+## Stay simple and declarative
+
+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.
+
+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.
+
+## Build composable components
+
+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.
+
+## Give it five minutes
+
+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!
--- a/docs/refactor/02-displaying-data.md
+++ b/docs/refactor/02-displaying-data.md
@ -0,0 +1,60 @@
+# Displaying data
+
+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.
+
+## Getting started
+
+Let's look at a really simple example. Create a `hello-react.html` file with the following code:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello React</title>
+    <script src="http://fb.me/react-0.4.0.min.js"></script>
+    <script src="http://fb.me/JSXTransformer-0.4.0.js"></script>
+  </head>
+  <body>
+    <div id="example"></div>
+    <script type="text/jsx">
+
+      // ** Your code goes here! **
+
+    </script>
+  </body>
+</html>
+```
+
+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:
+
+```javascript
+/** @jsx React.DOM */
+
+var HelloWorld = React.createClass({
+  render: function() {
+    return (
+      <p>
+        Hello, <input type="text" placeholder="Your name here" />!
+        It is {this.props.date.toTimeString()}
+      </p>
+    );
+  }
+});
+
+setInterval(function() {
+  React.renderComponent(
+    <HelloWorld date={new Date()} />,
+    document.getElementById('example')
+  );
+}, 500);
+```
+
+## Reactive updates
+
+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.
+
+## JSX syntax
+
+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.
+
+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.