mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
123 lines
7.0 KiB
XML
123 lines
7.0 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
|
<channel>
|
|
<title>React</title>
|
|
<description>A JavaScript library for building user interfaces</description>
|
|
<link>http://facebook.github.io/react</link>
|
|
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
|
|
|
|
<item>
|
|
<title>Why did we build React?</title>
|
|
<description><p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
|
and why would you want to use it?</p>
|
|
|
|
<h2>React isn&#39;t an MVC framework.</h2>
|
|
|
|
<p>React is a library for building composable user interfaces. It encourages
|
|
the creation of reusable UI components which present data that changes over
|
|
time.</p>
|
|
|
|
<h2>React doesn&#39;t use templates.</h2>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>React approaches building user interfaces differently by breaking them into
|
|
<strong>components</strong>. This means React uses JavaScript to generate markup, which we
|
|
see as an advantage over templates for a few reasons:</p>
|
|
|
|
<ul>
|
|
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
|
|
to build abstractions. This is incredibly important in large applications.</li>
|
|
<li>By unifying your markup with it&#39;s corresponding view logic, React can actually
|
|
make views <strong>easier to extend and maintain</strong>.</li>
|
|
<li>By baking an understanding of markup and content into JavaScript, there&#39;s
|
|
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
|
|
vulnerabilities.</li>
|
|
</ul>
|
|
|
|
<p>We&#39;ve also created <a href="facebook.github.io/react/docs/syntax.html">JSX</a>, an optional
|
|
syntax extension, in case you prefer the readability of HTML to raw JavaScript.</p>
|
|
|
|
<h2>Reactive updates are dead simple.</h2>
|
|
|
|
<p>React really shines when your data changes over time.</p>
|
|
|
|
<p>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 <a href="http://docs.angularjs.org/guide/directive#reasonsbehindthecompilelinkseparation">requires
|
|
a linking function to manually update DOM nodes</a>.</p>
|
|
|
|
<p>React takes a different approach.</p>
|
|
|
|
<p>When your component is first initialized, the <code>render</code> 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 <code>render</code> method is called again. In order to perform updates as
|
|
efficiently as possible, we diff the return value from the previous call to
|
|
<code>render</code> with the new one, and generate a minimal set of changes to be applied
|
|
to the DOM.</p>
|
|
|
|
<blockquote>
|
|
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it&#39;s a
|
|
lightweight description of what the DOM should look like.</p>
|
|
</blockquote>
|
|
|
|
<p>We call this process <strong>reconciliation</strong>. Check out
|
|
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
|
|
reconciliation in action.</p>
|
|
|
|
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
|
doesn&#39;t need to explicitly specify data bindings. We&#39;ve found this approach
|
|
makes it easier to build apps.</p>
|
|
|
|
<h2>HTML is just the beginning.</h2>
|
|
|
|
<p>Because React has its own lightweight representation of the document, we can do
|
|
some pretty cool things with it:</p>
|
|
|
|
<ul>
|
|
<li>Facebook has dynamic charts that render to <code>&lt;canvas&gt;</code> instead of HTML.</li>
|
|
<li>Instagram is a &quot;single page&quot; web app built entirely with React and
|
|
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
|
|
<li>We&#39;ve built internal prototypes that run React apps in a web worker and use
|
|
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
|
|
<li>You can run React
|
|
<a href="http://github.com/petehunt/react-server-rendering">on the server</a>
|
|
for SEO, performance, code sharing and overall flexibility.</li>
|
|
<li>Events behave in a consistent, standards-compliant way in all browsers
|
|
(including IE8) and automatically use
|
|
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
|
|
</ul>
|
|
|
|
<p>Head on over to
|
|
<a href="http://facebook.github.io/react">facebook.github.io/react</a> 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
|
|
<a href="http://facebook.github.io/react/support.html">get in touch</a> with us!</p>
|
|
|
|
<p>Thanks for reading!</p>
|
|
</description>
|
|
<pubDate>2013-06-05T00:00:00-07:00</pubDate>
|
|
<link>http://facebook.github.io/react/blog/2013/06/05/why-react.html</link>
|
|
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/05/why-react.html</guid>
|
|
</item>
|
|
|
|
<item>
|
|
<title>JSFiddle Integration</title>
|
|
<description><p><a href="http://jsfiddle.net">JSFiddle</a> 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 <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
|
|
|
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
|
|
|
|
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
</description>
|
|
<pubDate>2013-06-02T00:00:00-07:00</pubDate>
|
|
<link>http://facebook.github.io/react/blog/2013/06/02/jsfiddle-integration.html</link>
|
|
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/02/jsfiddle-integration.html</guid>
|
|
</item>
|
|
|
|
</channel>
|
|
</rss>
|