diff --git a/_config.yml b/_config.yml index 12f99281..fab82062 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/docs/syntax.md b/docs/syntax.md index 4b25b572..4520e376 100644 --- a/docs/syntax.md +++ b/docs/syntax.md @@ -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 diff --git a/index.md b/index.md index 8ea029c7..9463be70 100644 --- a/index.md +++ b/index.md @@ -3,19 +3,21 @@ layout: page title: A JavaScript library for building user interfaces id: home --- +
-

The "V" in MVC

+

Declarative

- 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.

-

Fast & Declarative

+

Efficient

- 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.

@@ -33,21 +35,21 @@ id: home

A Simple Component

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 JSX is optional; you don't - need to use it. 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`.
+ JSX is optional and not required to use React.

A Stateful Component

- 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()`. This example - doesn't use JSX, 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()`.
+ This example demonstrates use of React without JSX.