The library for web and native user interfaces.
[docs] Revise marketing copy around JSX.
yungsters committed
May 30, 2013 at 09:36 UTC
5fc2aad36433f289b06551333daa2c54f4671b6f
4 files changed
+33
-33
README.md
+1
-1
@@ -3,7 +3,7 @@
3
React is a JavaScript library for building user interfaces.
4
5
* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
6
-* **Efficient:** React minimizes interactions with the DOM by using a mock representation of the DOM.
6
+* **Efficient:** React computes the minimal set of changes necessary to keep your DOM up-to-date.
7
* **Flexible:** React works with the libraries and frameworks that you already know.
8
9
[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
docs/_config.yml
+6
-6
@@ -1,14 +1,14 @@
1
---
2
+pygments: true
3
name: React
3
-markdown: redcarpet
4
-baseurl: /react
4
react_version: 0.3.0
6
-redcarpet:
7
- extensions:
8
- - fenced_code_blocks
9
-pygments: true
5
exclude:
6
- Gemfile
7
- Gemfile.lock
8
- README.md
9
- Rakefile
10
+redcarpet:
11
+ extensions:
12
+ - fenced_code_blocks
13
+markdown: redcarpet
14
+baseurl: /react
docs/docs/syntax.md
+10
-12
@@ -7,27 +7,25 @@ prev: common-questions.html
7
next: component-basics.html
8
---
9
10
-JSX is a JavaScript XML syntax extension recommended (but not required) for use
10
+JSX is a JavaScript XML syntax transform recommended (but not required) for use
11
with React.
12
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
-
13
## Why JSX?
14
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:
15
+First of all, **don't use JSX if you don't like it!**
16
+
17
+React works out of the box without JSX. Simply construct your markup using the
18
+functions on `React.DOM`. For example, here's how to construct a simple link:
19
20
```javascript
23
-var mylink = React.DOM.a({href: 'http://facebook.github.io/react'}, 'Hello React');
21
+var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
22
```
23
26
-However, we like JSX for a bunch of reasons:
24
+We recommend using JSX for many reasons:
25
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
26
+- It's easier to visualize the structure of the DOM.
27
+- Designers are more comfortable making changes.
28
+- It's familiar for those who have used MXML or XAML.
29
30
## The Transform
31
docs/index.md
+16
-14
@@ -3,19 +3,21 @@ layout: page
3
title: A JavaScript library for building user interfaces
4
id: home
5
---
6
+
7
<section class="light home-section">
8
<div class="marketing-row">
9
<div class="marketing-col">
9
- <h3>The "V" in MVC</h3>
10
+ <h3>Declarative</h3>
11
<p>
11
- Write reusable UI components in JavaScript. Read and write to any data source.
12
+ React uses a declarative paradigm that makes it easier to reason about
13
+ your application.
14
</p>
15
</div>
16
<div class="marketing-col">
15
- <h3>Fast & Declarative</h3>
17
+ <h3>Efficient</h3>
18
<p>
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
+ React computes the minimal set of changes necessary to keep your DOM
20
+ up-to-date.
21
</p>
22
</div>
23
<div class="marketing-col">
@@ -33,21 +35,21 @@ id: home
35
<h3>A Simple Component</h3>
36
<p>
37
React components implement a `render()` method that takes input data and
36
- returns what to display. This example constructs the component using an
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`.
38
+ returns what to display. This example uses an XML-like syntax called
39
+ JSX. Input data that is passed into the component can be accessed by
40
+ `render()` via `this.props`.<br />
41
+ <strong>JSX is optional and not required to use React.</strong>
42
</p>
43
<div id="helloExample"></div>
44
</div>
45
<div class="example">
46
<h3>A Stateful Component</h3>
47
<p>
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()`. <strong>This example
50
- doesn't use JSX</strong>, but you could if you wanted to.
48
+ In addition to taking input data (accessed via `this.props`), a
49
+ component can maintain internal state data (accessed via `this.state`).
50
+ When a component's state data changes, the rendered markup will be
51
+ updated by re-invoking `render()`.<br />
52
+ <strong>This example demonstrates use of React without JSX.</strong>
53
</p>
54
<div id="timerExample"></div>
55
</div>