{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/06/05/why-react.html","result":{"data":{"markdownRemark":{"html":"

There are a lot of JavaScript MVC frameworks out there. Why did we build React\nand why would you want to use it?

\n

React isn’t an MVC framework.

\n

React is a library for building composable user interfaces. It encourages\nthe creation of reusable UI components which present data that changes over\ntime.

\n

React doesn’t use templates.

\n

Traditionally, web application UIs are built using templates or HTML directives.\nThese templates dictate the full set of abstractions that you are allowed to use\nto build your UI.

\n

React approaches building user interfaces differently by breaking them into\ncomponents. This means React uses a real, full featured programming language\nto render views, which we see as an advantage over templates for a few reasons:

\n\n

We’ve also created JSX, an optional syntax\nextension, in case you prefer the readability of HTML to raw JavaScript.

\n

Reactive updates are dead simple.

\n

React really shines when your data changes over time.

\n

In a traditional JavaScript application, you need to look at what data changed\nand imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,\nwhich provides a declarative interface via directives and data binding requires\na linking function to manually update DOM nodes.

\n

React takes a different approach.

\n

When your component is first initialized, the render method is called,\ngenerating a lightweight representation of your view. From that representation,\na string of markup is produced, and injected into the document. When your data\nchanges, the render method is called again. In order to perform updates as\nefficiently as possible, we diff the return value from the previous call to\nrender with the new one, and generate a minimal set of changes to be applied\nto the DOM.

\n
\n

The data returned from render is neither a string nor a DOM node — it’s a\nlightweight description of what the DOM should look like.

\n
\n

We call this process reconciliation. Check out\nthis jsFiddle to see an example of\nreconciliation in action.

\n

Because this re-render is so fast (around 1ms for TodoMVC), the developer\ndoesn’t need to explicitly specify data bindings. We’ve found this approach\nmakes it easier to build apps.

\n

HTML is just the beginning.

\n

Because React has its own lightweight representation of the document, we can do\nsome pretty cool things with it:

\n\n

Head on over to https://reactjs.org to check out what we have\nbuilt. Our documentation is geared towards building apps with the framework,\nbut if you are interested in the nuts and bolts\nget in touch with us!

\n

Thanks for reading!

","excerpt":"There are a lot of JavaScript MVC frameworks out there. Why did we build React\nand why would you want to use it? React isn’t an MVC framework. React is a library for building composable user interfaces. It encourages\nthe creation of reusable UI components which present data that changes over\ntime. React doesn’t use templates. Traditionally, web application UIs are built using templates or HTML directives.\nThese templates dictate the full set of abstractions that you are allowed to use\nto build…","frontmatter":{"title":"Why did we build React?","next":null,"prev":null,"author":[{"frontmatter":{"name":"Pete Hunt","url":"https://twitter.com/floydophone"}}]},"fields":{"date":"June 05, 2013","path":"content/blog/2013-06-05-why-react.md","slug":"/blog/2013/06/05/why-react.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2013/06/05/why-react.html"}},"staticQueryHashes":[]}