The library for web and native user interfaces.
Docs updates per community response
petehunt committed
May 30, 2013 at 01:16 UTC
cfe3b75cb010653ea5dfcea74bc8a36911587504
4 files changed
+34
-14
docs/_js/examples/timer.js
+3
-6
@@ -3,7 +3,6 @@
3
*/
4
5
var TIMER_COMPONENT = "\
6
-/** @jsx React.DOM */\n\
6
var Timer = React.createClass({\n\
7
getInitialState: function() {\n\
8
return {secondsElapsed: 0};\n\
@@ -15,15 +14,13 @@ var Timer = React.createClass({\n\
14
setInterval(this.tick, 1000);\n\
15
},\n\
16
render: function() {\n\
18
- return (\n\
19
- <div>\n\
20
- {'Seconds Elapsed: ' + this.state.secondsElapsed}\n\
21
- </div>\n\
17
+ return React.DOM.div({},\n\
18
+ 'Seconds Elapsed: ' + this.state.secondsElapsed\n\
19
);\n\
20
}\n\
21
});\n\
22
\n\
26
-React.renderComponent(<Timer />, mountNode);\
23
+React.renderComponent(Timer({}), mountNode);\
24
";
25
26
React.renderComponent(
docs/docs/common-questions.md
+6
@@ -5,6 +5,7 @@ layout: docs
5
prev: tutorial.html
6
next: syntax.html
7
---
8
+
9
### What browsers does React support?
10
11
React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.
@@ -17,6 +18,11 @@ React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the [
18
19
The [Instagram](http://instagram.com/) website is built entirely in React. The [Facebook](https://www.facebook.com/) website is also increasingly using React, including the common commenting plugin across the site.
20
21
+### I don't get it. React is confusing!
22
+
23
+[This blog post by a member of the React team](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood) talks about some of the reasons
24
+why React is designed the way that it is.
25
+
26
### Can I integrate with other JavaScript libraries?
27
28
Absolutely! In fact, we encourage it! See [our GitHub repo](http://github.com/facebook/react/) for a [TodoMVC example using Backbone](https://github.com/facebook/react/tree/master/examples/todomvc-backbone) and a [jQuery + Bootstrap modal demo](https://github.com/facebook/react/tree/master/examples/jquery-bootstrap).
docs/docs/syntax.md
+16
@@ -13,6 +13,22 @@ with React.
13
JSX makes code that deeply nests React components more readable, and writing it
14
feels like writing HTML. React documentation examples make use of JSX.
15
16
+## Why JSX? It seems like a terrible idea.
17
+
18
+First of all, **don't use JSX if you don't like it!** All of React's features
19
+work just fine without using JSX. Simply construct your markup using the functions
20
+on `React.DOM`. For example, here's how to construct a simple link:
21
+
22
+```javascript
23
+var mylink = React.DOM.a({href: 'http://facebook.github.io/react'}, 'Hello React');
24
+```
25
+
26
+However, we like JSX for a bunch of reasons:
27
+
28
+- It's easier to visualize the structure of the DOM
29
+- Designers are more comfortable making changes
30
+- It's familiar for those who have used MXML or XAML
31
+
32
## The Transform
33
34
JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
docs/index.md
+9
-8
@@ -6,17 +6,16 @@ id: home
6
<section class="light home-section">
7
<div class="marketing-row">
8
<div class="marketing-col">
9
- <h3>Declarative</h3>
9
+ <h3>The "V" in MVC</h3>
10
<p>
11
- React uses a declarative paradigm that makes it easier to reason about
12
- your application.
11
+ Write reusable UI components in JavaScript. Read and write to any data source.
12
</p>
13
</div>
14
<div class="marketing-col">
16
- <h3>Efficient</h3>
15
+ <h3>Fast & Declarative</h3>
16
<p>
18
- React minimizes interactions with the DOM by using a mock representation
19
- of the DOM.
17
+ Describe how you want your component to look. React will automatically compute
18
+ the fastest way to keep the UI up-to-date when the data changes.
19
</p>
20
</div>
21
<div class="marketing-col">
@@ -35,7 +34,8 @@ id: home
34
<p>
35
React components implement a `render()` method that takes input data and
36
returns what to display. This example constructs the component using an
38
- XML-like syntax called JSX. Input data is passed to the component as XML
37
+ XML-like syntax called JSX, but <strong>JSX is optional; you don't
38
+ need to use it</strong>. Input data is passed to the component as XML
39
attributes, and `render()` accesses this data via `this.props`.
40
</p>
41
<div id="helloExample"></div>
@@ -46,7 +46,8 @@ id: home
46
In addition to taking data from its creator (accessed via `this.props`),
47
a component can maintain internal state data (accessed via
48
`this.state`). When a component's state data changes, the rendered
49
- markup will be updated by re-invoking `render()`.
49
+ markup will be updated by re-invoking `render()`. <strong>This example
50
+ doesn't use JSX</strong>, but you could if you wanted to.
51
</p>
52
<div id="timerExample"></div>
53
</div>