Over the past few years, you may have come across ReactJS more, and more frequently. That’s not a coincidence: since the library was open sourced and released to the public in 2013, adoption of React has been increasing rapidly.

It’s estimated that there are 1,365+ developers and 94,000+ websites that currently utilize ReactJS and this trend is showing no sign of slowing down anytime soon. Part of this can be attributed to the fact that huge companies like Airbnb, Facebook, Uber, and PayPal are using it to solve their problems building user interfaces, giving the toolkit a tremendous amount of clout and credibility.

Although it’s clear that people are using ReactJS to solve their problems, before you understand why it has such broad appeal, it’s important to understand what ReactJS is, what it’s actually capable of, and what its drawbacks are.

So, what is ReactJS?

ReactJS is a toolkit for building user interfaces that was first deployed by Facebook in 2011. At its core, React is a solution to a problem that developers faced when building user interfaces. It allows developers to build complex user interfaces which have components that will change frequently over time, without having to write a lot of very tricky JavaScript code.

While React is a lot like front-end framework, it’s actually a little different in terms of functionality. Technically, it is a user interface library. It includes some of the same aspects of front-end frameworks, but its purpose is to organize HTML elements into components.

People will generally say that React is the V in MV* framework architecture. This means, rather than doing all the things most frameworks do, React is focused on being able to generate HTML for the application it’s used in, and it does so in a very intuitive way.

What are the strengths of ReactJS?

So now that you have a sense of what React actually is, we’re going to walk through the benefits of React so you can understand why you may want to use React and what it can actually do.

JSX allows you to write HTML within JavaScript

JSX is a powerful implementation detail of React. It’s a cool feature that makes React easy and fun to use because it’s relatively quick to make a feature and rewarding to see it. JSX brings HTML directly into JavaScript and allows you to build HTML within the JavaScript code.

If you weren’t using React but were using regular JavaScript, you could build an HTML string that you could include on a page. However, it could be a little messy. You may have needed to write code that looks like this in the past:

But you can see that using JavaScript strings to build HTML elements is something that is a little less clean. React fixes this, and allows us to build HTML elements using JSX, and substitute values in {} with the value that the JavaScript code evaluates to.

Notice this style of building up HTML representations is a bit more intuitive. It’s also worth noting between the {}, you have access to the full JavaScript programming language. You are not limited by a templating engine.

Components allow you to easily break down complex UI’s

The core of what makes React powerful is the idea of components. Rather than worrying about a full web application all at once, React allows you to break down complex user interfaces into simple components.

Components allow you to specify in detail how a small part of an application works. For example, take a web application that looks like this:

This could be broken down into separate sub-components, and each subcomponent would only need to worry about the logic for its particular level. This would end up looking something like this:

With this type of a breakdown, we could have different components for each individual section. Album, Navigation and Genre could each be great candidates for individual components. Each component will only need to manage the interface for it’s individual part.

The cornerstone of ReactJS is that it makes it intuitively easy to break an app into small components, and each individual component can keep its specific logic isolated from other components. If we were to take this approach, each component of the application we can think about in isolation. For example, take a moment to think about what could be the Album component in our application.

A component is a simple JavaScript class that inherits from the React.Component and implements a render method. This render method will simply need to return the JSX for the HTML it should render.

For example, the Album component could look like this:

This code would let the following JSX:

Expand to the following HTML:

This makes it intuitive to build simple components. Breaking a user interface into components like this makes the application easier to work on as time elapses. Components are reusable in different situations, and you’ll often find yourself able to leverage a component you’ve already built.

Props help populate components with custom data

Props allow you to pass through custom data to a component and works as a way we can fill in the blank when rendering JSX components.

They are best understood through an example. Sometimes when including a component on a page, there are some blanks you might desire to fill in. This could work with the Album component example, too.

Then, we could define a component with the following code:

And the this.props.title, this.props.description and this.props.lastPlayed will be blanks that the Album component will be able to fill in. These are the props that are passed to the component. This means the above <Album title=”Firehose Weekend”: description=”Learn to code a web app built with HTML, CSS, and ruby in hackathon style weekend.” lastPlayed=”A minute ago” /> could expand out to the following HTML:

This means it is really easy to pass information from one component to another, using props.

State allows you to store everything that changes in a single place

With ReactJS, they suggest you take all the stuff that can change around during the course of the application (the application’s stateful properties) and put it into a single place. This place is called state in react applications. This makes single page web applications so much simpler since you’ll always know where to look for the aspects of the web application that change.

Out of the box, ReactJS includes a way to keep track of state. It’s pretty simple though, but it works great for a lot of web applications. For more complex web applications, Facebook suggests looking into alternative ways to manage state. They suggest using a flux pattern, but they don’t go too deep into implementation details. Because of this, many different libraries have come out to manage state in React apps and as a React developer you can pick and choose the way to handle it that you find most intuitive for your application.

Popular libraries to manage your state in React applications are:

• Redux
• Reflux
• Flummox
• MobX
• Alt

While the developers at Facebook, the company who open sourced React, generally all use React, different teams use different ways to manage their state. Redux and MobX are two of the most commonly used implementations, but React’s built-in component state can take you really far too.

Unidirectional Flow Of Data

Earlier, we suggested that the state exists in a single place, and that’s the only place where things that change around in the application can be updated. The powerful aspect of ReactJS is its unidirectional flow of data.

This is an idea that takes roots in functional programming ideas and helps to facilitate writing code that scales, that is very predictable, and that is easy to test.

Many traditional JavaScript frameworks have two-way data binding. This means often times two things can be bound together to make things easier to work with. In some frameworks, for instance, a text box could be bound to a variable. This would mean that as a user who enters values in the text box, the value of the variable would change. But external things can update the variable also, and those changes should ultimately cascade down to the text box that is bound.

Two-way data binding is simpler in simple use cases, but as applications get more and more complex, it’s easy for the “automatic binding” to step on its own toes. Rather than having a variable bound two ways for React, everything always goes through the same path. If a user presses a key in an input field, this in turn fires an event, which goes through the full process, and if the text box was subscribed to listen to the event, eventually it would cause the text box to update.

ES6 will put you at the cutting edge of JavaScript

ES6 is the new syntax of JavaScript and most developers using React will also want to use ES6 too. It’s slowly getting browser adoption, but the babel project lets you use the new ES6 features today. You don’t need to use this new syntax, but you’ll find most developers that take the time to use the framework of React, take the time to get the benefit of the new language features in ES6.

We’ve covered the reasons why ES6 is the Future of JavaScript before, so it’s not a surprise that most React developers opt to use this feature set of the new language.

React uses something called the Virtual DOM and that makes React FAST!

React uses some pretty cool optimizations to make it as fast as possible. There are a lot of reasons the developers of ReactJS figured that the most expensive aspect of their framework would be updating old HTML with new HTML after the state changes.

The developers came up with the idea of building a Virtual DOM. The Virtual DOM allows React to know when to re-render or ignore specific pieces of the DOM because it is able to observe when this data changes. Having a user interface that reacts quickly for the user is important for the user experience of React applications.

The big benefit of being a User Interface library

Finally, there are benefits of ReactJS being a user interface library instead of a full framework. React can be used like a web framework, particularly if you choose to include a few other packages in your project too. While most JavaScript frameworks will only work in the context of Single Page Applications, React can do a great job in these apps, but can also be applied to existing traditional apps too.

This means that transitioning from a typical web application architecture to a single page application can happen progressively with React vs. having to completely rewrite all your code.

What are the weaknesses of ReactJS?

We’ve spoken a lot about the benefits of ReactJS and why you would want to use it, but we haven’t mentioned any drawbacks. In order for us to determine when React is the right technical choice, it’s important to understand when it’s not.

As we’ve already covered, React is a powerful tool that can help you build complex user interfaces. However, it’s important to remember that JavaScript with no framework can often get you really far too. If it’s a simple task that you can do with 2 lines of JavaScript, does it make sense to go through the whole effort of understanding all the fragments to use React? Probably not. Not every problem will require a tool as powerful as React, and when assessing our options, we should think, “are we using a rocket ship to travel next door?”.

So, how can we actually determine when we’re using a rocket ship to travel next door? As a general rule of thumb, if there’s a lot of interaction and “stuff” taking place between the component and other areas of the site, then React would most likely be a good choice. Put another way, if your user interface (form fields, HTML, and JavaScript) is complicated and needs structure, then React will simplify things and allow you to scale. If it’s not, then JavaScript with no framework may be sufficient for you.

It takes a good amount of work to set up React (as we know). If your project doesn’t cross the threshold for needing a toolkit/framework, you probably shouldn’t use React.

In Summary

ReactJS has definitely grown in popularity for a reason. In the right situations, it can make building complex user interfaces a lot easier for you, but it isn’t going to be the right tool for every situation. Below we’ve pulled together the key strengths and weaknesses of React so that you can determine for yourself whether it’s the right choice for you.

Strengths of ReactJS

• React allows you to break apart user interfaces into individual components.
• React’s unidirectional data flow makes updating a user interface predicable and reliable.
• By keeping all the data that change during the lifecycle into a single state code for building the user interfaces can be intuitive and easy to understand.

Weaknesses of ReactJS

• React can make a project’s configuration and setup confusing.
• You can get really far without a framework for user interfaces. For most simple applications it can be simpler to build an application with vanilla JavaScript.