Facts You Should Know About React

React is the tool for many web developers who build front-end web interfaces. Dubbed as the premium way to build rich experiences on the browser, many front-end developers have come to embrace it. Despite its popularity, React has many well-kept secrets newcomers might not know and seasoned veterans may not have yet realized.

The React tool itself is rather small, yet a vibrant community has sprung up around it. For example, in the React ecosystem, you will find the React Router and the Flux architecture. Additional tools can often generate a lot of commotion which can make you lose focus. This somewhat obscures the hidden gems one can find while programming in React.

For web developers, the recent explosion of front-end frameworks is moving at a neck-breaking speed. At times, it may feel overwhelming to learn everything there is to know about any one choice. Teams tend to pick what is more popular in the JavaScript community which further discourages the need to go beneath the surface.

It is time for us to see if there is more to this React story.

1. Not a Framework

One common misconception is that React is a front-end framework. This stems from the Hollywood principle: “Don’t call us, we’ll call you.” On the surface, it does seem like React calls the render() method for you and does a bunch of magic behind the scenes. This can be scary for newcomers because frameworks can hijack the page while making incomprehensible mind-warping changes to the DOM.

A lightweight library, in contrast, is only an abstraction. Leaving the programmer empowered to specify what changes go into the DOM. This level of freedom increases your creativity because you are no longer chained to a program telling you what you can and cannot do.

React is part of the latter, meaning that it is a library and not a framework. You can think of every component as an abstraction that wraps around the DOM. React calls this abstraction the virtual DOM and lets you write components in plain JavaScript. In React, you may bypass the virtual DOM and make direct changes to the DOM if you need to.

The virtual DOM in React calculates the minimal amount of changes necessary to sync up with the DOM. This increases the performance of your web interfaces because the library respects the DOM.

The virtual DOM is an in-memory representation which makes it faster and more efficient than the real DOM. React reconciles the current state of the UI with the virtual DOM and calculates the set of changes to do this. This means React components can run at 60fps, even on low-powered mobile devices.

You can think of the virtual DOM as a React component. This layer of abstraction is a self-contained and a single concern building block. This component can be written in plain JavaScript which gives you, the programmer, complete control over the UI.

The library gets out of the way and gives you total freedom while calculating minutiae like DOM changes for you.

2. Supports Type Systems

React comes with a built-in way to validate props, these are called propTypes.

React components can be part of a hierarchy of bigger components, therefore, a good practice is to validate prop data types. Think of propTypes as building a strongly typed system inside each component. This type of system adds clarity and intent to React components.

To declare a propType validator, let’s say you have a component MyReactComponent. This React component has a required prop named myComponentProperty of type string. For example:

MyReactComponent.propTypes = {
  myComponentProperty: PropTypes.string.isRequired
};

By declaring propTypes, it is easy for any programmer who looks at the code to understand its intent. These validators will throw errors that show up in the console when you pass in the wrong type.

React supports many propType validators which enhance the type system. Keep in mind you can chain isRequired to ensure a warning is shown when the prop goes missing.

Here is the complete list of prop-types:

• PropTypes.array: prop must be an array

• PropTypes.bool: prop must be a boolean

• PropTypes.func: prop must be a function

• PropTypes.number: prop must be a number

• PropTypes.object: prop must be an object

• PropTypes.symbol: prop must be a symbol

• PropTypes.string: prop must be a string

PropTypes match the primitive type system inside JavaScript. Think of propTypes as a superset of the primitive type system that now validates the type you pass into the component.

3. Embraces Immutability

Every React component you build has only two ways to work with data. Data can either be a prop or a state. This allows for building stateful or stateless components. A stateless component is one that uses props only. A stateful component has this.state which allows it to mutate data.

Props come from the initial configuration of the component and are passed in from a parent. React components that only use props are stateless because it does not mutate state. Props are immutable and unlock ways to do functional programming with pure functions that are testable.

State starts with a default value defined in the component’s constructor. Stateful components suffer from mutations that often come from user events.

In React, the state of a component is optional. Stateful components are often found at the top of the hierarchy as container components. React containers can fetch data through Ajax requests and mutate state through callbacks that come from user events.

The two types of components, stateful and stateless, draw a clean-cut wedge between mutable and read-only data. This further enhances the design principle where each React component is self-contained and has a single concern.

A typical React app has more stateless components than stateful components.

Conclusion

Having a lightweight library such as React can yield high-quality, beautiful, and clean code.

React is attractive because it embraces many sound programming practices available in plain vanilla JavaScript.

The library abstracts the real DOM in a way that is both efficient and elegant.