edits from the committee

_posts/2013-06-04-why-react.md

@@ -1,5 +1,5 @@
 ---
-title: Why Should You Care About React?
+title: Why did we build React?
 layout: post
 author: Pete Hunt
 ---
@@ -7,35 +7,26 @@ author: Pete Hunt
 There are a lot of JavaScript MVC frameworks out there. Why did we build React
 and why would you want to use it?
 
-
 ## React isn't an MVC framework.
 
-It's a library designed for building big UIs. The type where you have lots of
+React is a library for building composable user interfaces. It encourages
-reusable components that are handling events, presenting backend data, and
+the creation of reusable UI components which present data that changes over
-accepting user input. The type where you have to integrate with legacy code, and
+time.
-support legacy browsers.
-
-In the traditional MVC pattern, React is used to build the view. React lets you
-decide how to manage your data and business logic, be it outside of React
-components or within.
 
 ## React doesn't use templates.
 
-Traditionally, web application UIs are built using templates written in
+Traditionally, web application UIs are built using templates or HTML directives.
-templating languages or HTML directives. These templates dictate the full set of
+These templates dictate the full set of abstractions that you are allowed to use
-abstractions that you are allowed to use to build the user interface.
+to build your UI.
-
+
-React approaches building user interfaces differently by breaking them down into
+React approaches building user interfaces differently by breaking them into
-smaller, composable and reusable **components**. Although this means we have
+**components**. This means React uses JavaScript to generate markup, which we
-JavaScript generating markup, we think this is an advantage over templates for a
+see as an advantage over templates for a few reasons:
-few reasons:
+
-
+- **JavaScript is a flexible, powerful programming language** with the ability
-- **JavaScript is a flexible, powerful programming language with the ability to
+  to build abstractions. This is incredibly important in large applications.
-  build abstractions.** This is incredibly important in large applications.
+- By unifying your markup with it's corresponding view logic, React can actually
-- By unifying markup and logic with a common language, applications can
+  make views **easier to extend and maintain**.
-  implement more appropriate separations of concerns.
-- Large projects usually do not use WYSIWYG editors for production code, so
-  breaking apart markup from code creates friction without any real gain.
 - By baking an understanding of markup and content into JavaScript, there's
   **no manual string concatenation** and therefore less surface area for XSS
   vulnerabilities.
@@ -46,46 +37,35 @@ 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
+which provides a declarative interface via directives and data binding requires
-a linking function to manually update DOM nodes. Remember, React components are
+a linking function to manually update DOM nodes.
-flexible and expressive, much like directives and less like templates in
-AngularJS.
 
 React takes a different approach.
 
-When your component is first initialized, the `render()` method is called and a
+When your component is first initialized, the `render` method is called,
-string of static HTML is inserted into the DOM. When your data changes, the
+generating a lightweight representation of your view. From that representation,
-`render()` method is called again. We simply diff the old return value with the
+a string of markup is produced, and injected into the document. When your data
-new one to determine the fastest way to update the DOM. So if only a single
+changes, the `render` method is called again. In order to perform updates as
-attribute on a single element changes, that's all that React updates.
+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.
 
-We call this process **reconciliation**. Check out
+>  
-[this jsFiddle](http://jsfiddle.net/fv6RD/3/) for an example of reconciliation
+> The data returned from `render` is neither a string nor a DOM node -- it's a
-in action.
+> a lightweight description of what the DOM should look like.
-
-Reconciliation will usually be faster than handwritten code because React knows
-about the entire state of the page and can do cool tricks like batching reads
-and writes and picking the fastest subset of DOM mutations to perform.
 
-The way we're able to pull this off is by constructing a very fast, lightweight
+We call this process **reconciliation**. Check out
-representation of the DOM which knows which parts are dirtied and which parts
+[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
-are clean. **The data returned from `render()` is neither a string nor a DOM
+reconciliation in action.
-node -- it's a lightweight description of what the DOM should look like.**
-
-Because this re-render is so fast (on the order of 1ms for TodoMVC), we don't
-need the end user to explicitly specify data bindings. We've found this to be an
-easier way to build apps. It's a lot like the early days of the dynamic web.
-Back then, you wrote simple presentational code and when your data changed, you
-simply refreshed the page. Today, React makes that refresh very fast and
-lightweight, and only the parts of markup that need to be changed are changed.
 
-No other framework that we've seen has managed to decouple building UIs without
+Because this re-render is so fast (around 1ms for TodoMVC), the developer
-being coupled with the DOM.
+doesn't need to explicitly specify data bindings. We've found this approach
+makes it easier to build apps.
 
 ## HTML is just the beginning.
 
-Since React makes very few assumptions about its environment, we can do some
+Because React has its own lightweight representation of the document, we can do
-pretty cool things with it:
+some pretty cool things with it:
 
 - Facebook has dynamic charts that render to `<canvas>` instead of HTML.
 - Instagram is a "single page" web app built entirely with React and