Skip to content

Docs updates per community response #14

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
May 30, 2013
Merged

Docs updates per community response #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfe3b75
Docs updates per community response
petehunt May 30, 2013
2ce4530
make it a little less cynical
petehunt May 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions docs/_js/examples/timer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/

var TIMER_COMPONENT = "\
/** @jsx React.DOM */\n\
var Timer = React.createClass({\n\
getInitialState: function() {\n\
return {secondsElapsed: 0};\n\
Expand All @@ -15,15 +14,13 @@ var Timer = React.createClass({\n\
setInterval(this.tick, 1000);\n\
},\n\
render: function() {\n\
return (\n\
<div>\n\
{'Seconds Elapsed: ' + this.state.secondsElapsed}\n\
</div>\n\
return React.DOM.div({},\n\
'Seconds Elapsed: ' + this.state.secondsElapsed\n\
);\n\
}\n\
});\n\
\n\
React.renderComponent(<Timer />, mountNode);\
React.renderComponent(Timer({}), mountNode);\
";

React.renderComponent(
Expand Down
6 changes: 6 additions & 0 deletions docs/docs/common-questions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ layout: docs
prev: tutorial.html
next: syntax.html
---

### What browsers does React support?

React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.
Expand All @@ -17,6 +18,11 @@ React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the [

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.

### I don't get it. React is confusing!

[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
why React is designed the way that it is.

### Can I integrate with other JavaScript libraries?

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).
16 changes: 16 additions & 0 deletions docs/docs/syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,22 @@ 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:

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

However, we like JSX for a bunch of 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

## The Transform

JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
Expand Down
17 changes: 9 additions & 8 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,16 @@ id: home
<section class="light home-section">
<div class="marketing-row">
<div class="marketing-col">
<h3>Declarative</h3>
<h3>The &quot;V&quot; in MVC</h3>
<p>
React uses a declarative paradigm that makes it easier to reason about
your application.
Write reusable UI components in JavaScript. Read and write to any data source.
</p>
</div>
<div class="marketing-col">
<h3>Efficient</h3>
<h3>Fast &amp; Declarative</h3>
<p>
React minimizes interactions with the DOM by using a mock representation
of the DOM.
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.
Copy link
Contributor

Choose a reason for hiding this comment

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

How about "the fastest way to update the UI when the data changes"?

</p>
</div>
<div class="marketing-col">
Expand All @@ -35,7 +34,8 @@ id: home
<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. Input data is passed to the component as XML
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`.
</p>
<div id="helloExample"></div>
Expand All @@ -46,7 +46,8 @@ id: home
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()`.
markup will be updated by re-invoking `render()`. <strong>This example
doesn&apos;t use JSX</strong>, but you could if you wanted to.
</p>
<div id="timerExample"></div>
</div>
Expand Down