{"commit":{"authorName":"petehunt","revision":"36b61d2b11976b98f1b59ff310da2c3664feb7b8","authoredAt":"2013-05-30T04:42:48-07:00","subject":"Merge pull request #14 from petehunt\/marketing","authorEmail":"pete.hunt@fb.com","shortRevision":"36b61d2b11"},"files":[{"path":"docs\/_js\/examples\/timer.js","status":"M"},{"path":"docs\/docs\/common-questions.md","status":"M"},{"path":"docs\/docs\/syntax.md","status":"M"},{"path":"docs\/index.md","status":"M"}],"parents":["84a7c2e67c580e51c5849ba45bdace52b295a4bc","2ce4530d243f02c521d5cc637e766d93e035f124"],"patch":"diff --git a\/docs\/_js\/examples\/timer.js b\/docs\/_js\/examples\/timer.js\nindex f6bdc3e92c..f0488ec403 100644\n--- a\/docs\/_js\/examples\/timer.js\n+++ b\/docs\/_js\/examples\/timer.js\n@@ -3,7 +3,6 @@\n *\/\n \n var TIMER_COMPONENT = \"\\\n-\/** @jsx React.DOM *\/\\n\\\n var Timer = React.createClass({\\n\\\n getInitialState: function() {\\n\\\n return {secondsElapsed: 0};\\n\\\n@@ -15,15 +14,13 @@ var Timer = React.createClass({\\n\\\n setInterval(this.tick, 1000);\\n\\\n },\\n\\\n render: function() {\\n\\\n- return (\\n\\\n-

\\n\\\n- {'Seconds Elapsed: ' + this.state.secondsElapsed}\\n\\\n- <\/div>\\n\\\n+ return React.DOM.div({},\\n\\\n+ 'Seconds Elapsed: ' + this.state.secondsElapsed\\n\\\n );\\n\\\n }\\n\\\n });\\n\\\n \\n\\\n-React.renderComponent(, mountNode);\\\n+React.renderComponent(Timer({}), mountNode);\\\n \";\n \n React.renderComponent(\ndiff --git a\/docs\/docs\/common-questions.md b\/docs\/docs\/common-questions.md\nindex b0b4268713..d1235e24a4 100644\n--- a\/docs\/docs\/common-questions.md\n+++ b\/docs\/docs\/common-questions.md\n@@ -5,6 +5,7 @@ layout: docs\n prev: tutorial.html\n next: syntax.html\n ---\n+\n ### What browsers does React support?\n \n React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.\n@@ -17,6 +18,11 @@ React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the [\n \n 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.\n \n+### I don't get it. React is confusing!\n+\n+[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\n+why React is designed the way that it is.\n+\n ### Can I integrate with other JavaScript libraries?\n \n 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).\ndiff --git a\/docs\/docs\/syntax.md b\/docs\/docs\/syntax.md\nindex 5933d230f4..4b25b57244 100644\n--- a\/docs\/docs\/syntax.md\n+++ b\/docs\/docs\/syntax.md\n@@ -13,6 +13,22 @@ with React.\n JSX makes code that deeply nests React components more readable, and writing it\n feels like writing HTML. React documentation examples make use of JSX.\n \n+## Why JSX?\n+\n+First of all, **don't use JSX if you don't like it!** All of React's features\n+work just fine without using JSX. Simply construct your markup using the functions\n+on `React.DOM`. For example, here's how to construct a simple link:\n+\n+```javascript\n+var mylink = React.DOM.a({href: 'http:\/\/facebook.github.io\/react'}, 'Hello React');\n+```\n+\n+However, we like JSX for a bunch of reasons:\n+\n+- It's easier to visualize the structure of the DOM\n+- Designers are more comfortable making changes\n+- It's familiar for those who have used MXML or XAML\n+\n ## The Transform\n \n JSX transforms XML-like syntax into native JavaScript. It turns XML elements and\ndiff --git a\/docs\/index.md b\/docs\/index.md\nindex 7859157881..8ea029c7d3 100644\n--- a\/docs\/index.md\n+++ b\/docs\/index.md\n@@ -6,17 +6,16 @@ id: home\n

\n-

Declarative<\/h3>\n+

The "V" in MVC<\/h3>\n
\n- React uses a declarative paradigm that makes it easier to reason about\n- your application.\n+ Write reusable UI components in JavaScript. Read and write to any data source.\n <\/p>\n <\/div>\n
\n-
Efficient<\/h3>\n+
Fast & Declarative<\/h3>\n
\n- React minimizes interactions with the DOM by using a mock representation\n- of the DOM.\n+ Describe how you want your component to look. React will automatically compute\n+ the fastest way to keep the UI up-to-date when the data changes.\n <\/p>\n <\/div>\n
\n@@ -35,7 +34,8 @@ id: home\n
\n React components implement a `render()` method that takes input data and\n returns what to display. This example constructs the component using an\n- XML-like syntax called JSX. Input data is passed to the component as XML\n+ XML-like syntax called JSX, but JSX is optional; you don't\n+ need to use it<\/strong>. Input data is passed to the component as XML\n attributes, and `render()` accesses this data via `this.props`.\n <\/p>\n
<\/div>\n@@ -46,7 +46,8 @@ id: home\n In addition to taking data from its creator (accessed via `this.props`),\n a component can maintain internal state data (accessed via\n `this.state`). When a component's state data changes, the rendered\n- markup will be updated by re-invoking `render()`.\n+ markup will be updated by re-invoking `render()`. This example\n+ doesn't use JSX<\/strong>, but you could if you wanted to.\n <\/p>\n
<\/div>\n <\/div>\n","body":"Docs updates per community response"}

dillon1000/react

Files changed