Over the past few years, you may have come across React JS 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 React 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 React?
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 React JS?
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.
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 React 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.
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.
Props 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 React, 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, React 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:
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 React 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.
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.
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 React 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
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 React JS?
We’ve spoken a lot about the benefits of React 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.
It takes a good amount of work to set up React, so if your project doesn’t cross the threshold for needing a toolkit/framework, you probably shouldn’t use React.
React JS 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 React
- 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 React
- React can make a project’s configuration and setup confusing.
P.S. Want to learn React JS? We’ve built a course for that!