There are many JavaScript MVC frameworks out there. Why did we even create React and why would you want to use it?
React is not an MVC framework
React is a JS library for building compostable UI interfaces. It encourages the creation of reusable UI components, one of which is that current data changes over time.
React doesn’t use templates
Traditionally, UI interfaces for Web applications are built using templates or HTML instructions. You can use this set of abstracted page templates to construct your UI.
React handles building the UI differently in that it blocks the UI as a component. This means React uses a real, all-powerful programming language to render views (the View layer), and we see some reasons why React is better than a template:
- JavaScript is flexible, powerful, and capable of building a variety of abstract programming languages. This is very important in large applications.
- React actually makes the View layer easier to extend and maintain by aligning your logos with the logic of the View layer to which they are associated.
- By incorporating an understanding of markup elements and content into JavaScript, there is no string concatenation that is manually added, so there are few places where XSS vulnerabilities are exposed.
In addition, we’ve also created JSX, an optional syntax extension that you’ll love if you prefer the readability of HTML to native JavaScript.
Incredibly simple and responsive updates
React is incredibly useful when your data is changing dynamically.
In normal JavaScript applications, you need to pay attention to data changes and DOM updates associated with them. Even AngularJS is the same. It just provides a declarative interface through directives and data binding (which requires an association function to manually update the DOM node).
React takes a different approach.
When your component is initialized for the first time, the Render method is called, which generates a lightweight display layer of the View layer. For the presentation layer, it generates a series of tokens, which are also injected into the Document. The render method will be called again when your data changes. To perform the update as efficiently as possible, we compare the return value of the previously called Render method with the new value to generate a minimal set of changes to apply to the DOM update.
The data returned from the Render method is neither a string nor a DOM node — it’s a lightweight description of what the DOM should look like.
We call this process reconciliation. Click on jsFiddle to see an example of a reconciliation run.
Because this re-rendering is very fast (about 1 millisecond for TodoMVC), the developer does not need to explicitly specify the binding of the data. We found that this approach made it much easier to build applications.
HTML is just the beginning.
Because React has its own lightweight Document presentation layer, we can use this to do some cool things:
- Facebook renders dynamic charts using HTML instead of HTML.
- Instagram is a single page app built entirely with React and Backbone.Router. Designers regularly contribute React code written in JSX.
- We’ve built an internal prototype for running the React application in a Web worker and using React to manipulate the native iOS view layer through the Objective-C bridge interface
- For SEO, performance, shared code, and overall project flexibility, you can run React on the server side.
- Events are consistent and standardized across all modern browsers (including IE8), and event delegates are automatically adopted.
Go to facebook.github. IO /react to see what we’ve already built.
Our documentation is geared towards building applications using this framework, but if you’re interested in the details, feel free to contact us.
Thanks for reading!
Why did we build React?
Translator’s note: As the opening dish of the React series, it is necessary to introduce the official confession first,
Subsequent articles will examine how React works and compare it horizontally with Angular.
Stay tuned.