What Is React?
Put simply, React is a javascript library for building user interfaces. Designed by Jordan Walke and Denis Popov (two software engineers at Facebook), React was built for creating large-scale applications that store and modify data without reloading pages. Influenced by Angular and other front-end libraries, React aims to provide speed, simplicity, and scalability with the use of its notable features. In this post, I’m going to walk you through React’s capabilities and explain why it’s my favorite library.
React and Components
When dealing with React, forget what you know about MVC frameworks and the “Separation of Concerns” methodology. React is a paradigm shift for those who have worked with MVC frameworks in the past, as there are no models, view or controllers—there are only components.
React can be thought of as a “Separation of Components” methodology. Using the single responsibility principle, the UI should be broken up into a component hierarchy that encapsulates the behavior you need. Ideally, each component should perform a single task that will be used in conjunction to create our application. The advantages of a component-based application are vast: components are composable, reusable, maintainable, testable, and can be conditionally-rendered based on the state of the application.
Here’s how to use ES6 to define a component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Here’s how to render a user-defined component:
const element = <Welcome name=“Brian" />;
ReactDOM.render(
element,
document.getElementById('app')
);
Props in React
Properties (or props) are a set of immutable values that are passed to a component’s render method. Props are a way of passing data from a parent component to a child component. This is a channel in which components can communicate with each other, always from the top to the bottom.
This uni-directional flow is advantageous for many reasons and uses React to its greatest potential. Any and all declared components must never modify props as they are read-only and immutable values. Components in React must act as pure functions with respect to their props. Consider the following:
This is a pure function because it does not attempt to change its inputs:
function sum(a, b) {
return a + b;
}
This is an impure function because it changes its own input:
function withdraw(account, amount) {
account.total -= amount;
}
To make our UI interactive and dynamic, we will need more than just being able to pass around immutable properties. We will need to trigger changes to our underlying data model with the use of state, covered in the next section.
State and Unidirectional Data Flow
State allows React to update its outputs in response to user actions and network responses without modifying props within a function. The key thing to remember with this mechanism is “properties flow down, actions flow up.” One of the most challenging parts for newcomers is identifying where your state should live. Before we identify which component will hold state, we must remember that react applications have a unidirectional data flow. This means that a common parent should manage state in a multi-component application and pass the resulting values down to all of its children.
This methodology is advantageous because we now have a single source of truth. There are a few simple steps we can follow to identify where state should live within your multi-component application.
- Identify every component that renders something based on state.
- Find a common parent component.
- Either the common parent or another component higher up should own state.
- If all else fails, create a component simply for holding state and add it above the common parent component.
Once an action is performed on a lower level component and flows up to its parent, a new object is created and passed down to its children. React’s virtual DOM will compute the resulting differences and then update the browser’s DOM efficiently.
Virtual DOM
React’s Virtual DOM is a more efficient way to update the UI than updating the browser’s DOM directly. This is one of the most notable features of React because of the abundance of benefits it provides to our application.
The idea behind React’s Virtual DOM is to minimize and batch DOM updates that require redrawing the web page. Updating the browser’s DOM is fast, but the layout changes the browsers must render can happen very slowly. Every time the DOM is changed, browsers need to recalculate CSS and repaint the web page. The best thing any browser can do to shorten the time to repaint the screen is to minimize and batch the DOM changes—which is exactly what React’s virtual DOM does.
How does React’s virtual DOM work? It’s essentially the same thing as the browser’s DOM, a hierarchy of nodes that contain elements and their attributes along with content as object and properties. The virtual DOM’s node tree is created by our components’ render methods and is updated in response to actions updating our data model. Whenever our data model is changed, there is a three-step process to update our browser’s DOM.
- The entire UI is re-rendered in a Virtual DOM representation.
- React will calculate the difference between the previous state of the virtual DOM and the new one.
- The browser’s DOM will then be updated with the computed difference, essentially applying a patch.
React’s virtual DOM provides an elegant and simple way to asynchronously update our browser’s DOM, which can free up mental capacity and help optimize our user interface by applying minimal updates to the browser’s DOM.
React: The New Industry Standard
React, in my personal opinion, is the premiere javascript library for creating user interfaces. React’s stateful and reusable components combined with its virtual DOM’s ability to create highly scalable, high performing, and interactive applications make React the most desirable library in our industry today. React also outperforms its nearest competitor, Angular, which promotes two-way data binding rather than react’s single source of truth, one way data binding, and uni-directional data flow.
In addition, React’s virtual DOM takes abstraction to another level by minimizing and applying asynchronous patch updates to our browser’s DOM fast and flawlessly. React’s virtual DOM is also superior because we can render that DOM on the server for server-side rendering which other competing javascript libraries do not offer. All of these features are just high-level concepts of React, but are the reasons why it is my personal favorite library and the new industry standard way of creating your next application.
If you have any questions about React or javascript frameworks, feel free to reach out using ABT’s Contact Us page.
