+ React
+
+
+
+ JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.
+ ++ + + +React (by Facebook) is now available on JSFiddle. facebook.github.io/react/
— JSFiddle (@jsfiddle) June 2, 2013
+ React
+
+
+
+ There are a lot of JavaScript MVC frameworks out there. Why did we build React +and why would you want to use it?
+ +React is a library for building composable user interfaces. It encourages +the creation of reusable UI components which present data that changes over +time.
+ +Traditionally, web application UIs are built using templates or HTML directives. +These templates dictate the full set of abstractions that you are allowed to use +to build your UI.
+ +React approaches building user interfaces differently by breaking them into +components. This means React uses JavaScript to generate markup, which we +see as an advantage over templates for a few reasons:
+ +We've also created JSX, an optional +syntax extension, in case you prefer the readability of HTML to raw JavaScript.
+ +React really shines when your data changes over time.
+ +In a traditional JavaScript application, you need to look at what data changed +and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, +which provides a declarative interface via directives and data binding requires +a linking function to manually update DOM nodes.
+ +React takes a different approach.
+ +When your component is first initialized, the render method is called,
+generating a lightweight representation of your view. From that representation,
+a string of markup is produced, and injected into the document. When your data
+changes, the render method is called again. In order to perform updates as
+efficiently as possible, we diff the return value from the previous call to
+render with the new one, and generate a minimal set of changes to be applied
+to the DOM.
++ +The data returned from
+renderis neither a string nor a DOM node -- it's a +lightweight description of what the DOM should look like.
We call this process reconciliation. Check out +this jsFiddle to see an example of +reconciliation in action.
+ +Because this re-render is so fast (around 1ms for TodoMVC), the developer +doesn't need to explicitly specify data bindings. We've found this approach +makes it easier to build apps.
+ +Because React has its own lightweight representation of the document, we can do +some pretty cool things with it:
+ +<canvas> instead of HTML.Backbone.Router. Designers regularly contribute React code with JSX.Head on over to +facebook.github.io/react to check +out what we have built. Our documentation is geared towards building +apps with the framework, but if you are interested in the +nuts and bolts +get in touch with us!
+ +Thanks for reading!
+ +
+ React
+
+
+
+ There are a lot of JavaScript MVC frameworks out there. Why did we build React +and why would you want to use it?
+ + + + +JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.
+ + + + +Download the starter kit to get started.
+The easiest way to start hacking on React is using the following JSFiddle Hello Worlds
+ + + +Download the starter kit to get started.
-In the root directory of the starter kit, create a helloworld.html with the following contents.
<!DOCTYPE html>
<html>
diff --git a/docs/mixins.html b/docs/mixins.html
index 1a2992cf33..e0671475e6 100644
--- a/docs/mixins.html
+++ b/docs/mixins.html
@@ -12,6 +12,7 @@
+
@@ -41,6 +42,7 @@
docs
support
download
+ blog
github
diff --git a/docs/syntax.html b/docs/syntax.html
index 90184600f2..2bf53c28db 100644
--- a/docs/syntax.html
+++ b/docs/syntax.html
@@ -12,6 +12,7 @@
+
@@ -41,6 +42,7 @@
docs
support
download
+ blog
github
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 1eed3b6fd3..ccad91cc9f 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -12,6 +12,7 @@
+
@@ -41,6 +42,7 @@
docs
support
download
+ blog
github
@@ -155,7 +157,7 @@
var CommentBox = React.createClass({
render: function() {
return (
- ReactDOM.div({
+ React.DOM.div({
className: 'commentBox',
children: 'Hello, world! I am a CommentBox.'
})
@@ -217,7 +219,7 @@
}
});
Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "ReactDOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
+Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
The compressed, production version of React core
- +<script src="http://fb.me/react-0.3.2.min.js"></script>
+The uncompressed, development version of React core with inline documentation.
- +<script src="http://fb.me/react-0.3.2.js"></script>
+The JSX transformer used to support XML syntax in JavaScript.
- +<script src="http://fb.me/JSXTransformer-0.3.2.js"></script>
+$ bower install --save react