Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Revise marketing copy around JSX. #22

Merged
merged 1 commit into from
May 30, 2013
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
React is a JavaScript library for building user interfaces.

* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
* **Efficient:** React minimizes interactions with the DOM by using a mock representation of the DOM.
* **Efficient:** React computes the minimal set of changes necessary to keep your DOM up-to-date.
* **Flexible:** React works with the libraries and frameworks that you already know.

[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
Expand Down
12 changes: 6 additions & 6 deletions docs/_config.yml
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
pygments: true
name: React
markdown: redcarpet
baseurl: /react
react_version: 0.3.0
redcarpet:
extensions:
- fenced_code_blocks
pygments: true
exclude:
- Gemfile
- Gemfile.lock
- README.md
- Rakefile
redcarpet:
extensions:
- fenced_code_blocks
markdown: redcarpet
baseurl: /react
22 changes: 10 additions & 12 deletions docs/docs/syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,25 @@ prev: common-questions.html
next: component-basics.html
---

JSX is a JavaScript XML syntax extension recommended (but not required) for use
JSX is a JavaScript XML syntax transform recommended (but not required) for use
with React.

JSX makes code that deeply nests React components more readable, and writing it
feels like writing HTML. React documentation examples make use of JSX.

## Why JSX?

First of all, **don't use JSX if you don't like it!** All of React's features
work just fine without using JSX. Simply construct your markup using the functions
on `React.DOM`. For example, here's how to construct a simple link:
First of all, **don't use JSX if you don't like it!**

React works out of the box without JSX. Simply construct your markup using the
functions on `React.DOM`. For example, here's how to construct a simple link:

```javascript
var mylink = React.DOM.a({href: 'http://facebook.github.io/react'}, 'Hello React');
var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
```

However, we like JSX for a bunch of reasons:
We recommend using JSX for many reasons:

- It's easier to visualize the structure of the DOM
- Designers are more comfortable making changes
- It's familiar for those who have used MXML or XAML
- It's easier to visualize the structure of the DOM.
- Designers are more comfortable making changes.
- It's familiar for those who have used MXML or XAML.

## The Transform

Expand Down
30 changes: 16 additions & 14 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,21 @@ layout: page
title: A JavaScript library for building user interfaces
id: home
---

<section class="light home-section">
<div class="marketing-row">
<div class="marketing-col">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You guys sure about this? If we don't include this we're basically committing to re-explaining this over and over again.

<h3>The &quot;V&quot; in MVC</h3>
<h3>Declarative</h3>
<p>
Write reusable UI components in JavaScript. Read and write to any data source.
React uses a declarative paradigm that makes it easier to reason about
your application.
</p>
</div>
<div class="marketing-col">
<h3>Fast &amp; Declarative</h3>
<h3>Efficient</h3>
<p>
Describe how you want your component to look. React will automatically compute
the fastest way to keep the UI up-to-date when the data changes.
React computes the minimal set of changes necessary to keep your DOM
up-to-date.
</p>
</div>
<div class="marketing-col">
Expand All @@ -33,21 +35,21 @@ id: home
<h3>A Simple Component</h3>
<p>
React components implement a `render()` method that takes input data and
returns what to display. This example constructs the component using an
XML-like syntax called JSX, but <strong>JSX is optional; you don&apos;t
need to use it</strong>. Input data is passed to the component as XML
attributes, and `render()` accesses this data via `this.props`.
returns what to display. This example uses an XML-like syntax called
JSX. Input data that is passed into the component can be accessed by
`render()` via `this.props`.<br />
<strong>JSX is optional and not required to use React.</strong>
</p>
<div id="helloExample"></div>
</div>
<div class="example">
<h3>A Stateful Component</h3>
<p>
In addition to taking data from its creator (accessed via `this.props`),
a component can maintain internal state data (accessed via
`this.state`). When a component's state data changes, the rendered
markup will be updated by re-invoking `render()`. <strong>This example
doesn&apos;t use JSX</strong>, but you could if you wanted to.
In addition to taking input data (accessed via `this.props`), a
component can maintain internal state data (accessed via `this.state`).
When a component's state data changes, the rendered markup will be
updated by re-invoking `render()`.<br />
<strong>This example demonstrates use of React without JSX.</strong>
</p>
<div id="timerExample"></div>
</div>
Expand Down