React - Why


What is React?

React isn't an MVC framework. React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

Where did React come from?

Facebook. React was born out of Facebook’s desire to have better UI components for its Facebook and Instagram web applications.

Why is it named React?

Reactive updates are dead simple. 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 render 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. 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.

Why should we use React?

React is quickly becoming the most popular JavaScript library for building user interface (UI) components for HTML/CSS/JS applications. Among a crowded field of frameworks and libraries, it stands out as a simple and efficient approach to building complex, composable UIs that efficiently update the DOM.

React has many benefits over other UI solutions. Its overall API is comparatively small, and has a fast learning curve. In an hour or so, many developers are up and running using this new library to build reusable, extensible and maintainable UI components. For building small components the pure JavaScript code API is great, but for larger components working with the createElement function quickly becomes tedious.

One of the goals of React is to eschew the template-driven UI solutions such as Angular.js or Handlebars. Many developers consider such template-driven UI approaches to be antithetical to proper UI design because they can allow XSS exploits, are difficult to update when data changes occur, and can be difficult to extend/reuse. Many of the complaints center around the usage of logic in the template itself. React offers an alternative of a composable, code-driven approach for building UIs. The function createElement is used to create new elements in code, including the setting of element attributes and the definition of child content. Nevertheless, it is tedious to use especially when there is no logic per se, and some HTML elements (including attributes) or React Components simply need to be easily created. React’s solution is to use a more familiar declarative syntax for such content, while wrapping that declarative content in JavaScript.

When React was first announced it looked a little odd. It focused solely on the View layer, and had no Models or Controllers. The code examples were written in a strange syntax called JSX which appeared to many like a backwards step towards Ye’ Olden Days where it was common to mix HTML and JavaScript together. No information was given on how you should structure your application other than that of a component hierarchy — composable chunks of UI that could re-render efficiently whenever state changed. React took a few notable stances against popular ideas that existed in this space, features like two-way data binding and templating were blasted as bad ideas that are best avoided.

Everyone has touted the merits of one-way data flow, component hierarchies and simple explicit renders, making the task simpler and the code more predictable.

Its focus on the view layer means that it’s considerably less opinionated than other frameworks that attempt to solve every problem. Its wafer thin API means that there’s really not much to learn and it doesn’t warrant more than a handful of pages of documentation. This is a great help to those learning and it makes development simpler too, as you don’t have much cognitive overhead. Wherever possible, React opts for plain JavaScript constructs and language features rather than custom APIs or templating languages.

Doing one thing well has also allowed room for people interested in the project to contribute their own pieces to the React ecosystem. As a result of this projects like React Router, Redux and CSS Modules have arisen.

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

Why does React not use template?

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 a real, full featured programming language to render views, which we see as an advantage over templates for a few reasons:

  1. JavaScript is a flexible, powerful programming language with the ability to build abstractions. This is incredibly important in large applications.
  2. By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.
  3. By baking an understanding of markup and content into JavaScript, there's no manual string concatenation and therefore less surface area for XSS vulnerabilities.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License