Reactjs Overview

frontend community August 21, 2019

Reactjs Overview

In the past years, in the area of web development, there have been lots of trends consisting of new technologies that stirred up the developers’ enthusiasm. A considerable amount of new ideas and implementations have had their hour of fame. However, few of them were here to stay.

One of those is React JS, the one that gained the greatest popularity and appreciation from the front-end community. It currently reaches about 2-3 million downloads per week, it is supported by the billion-dollar company - Facebook, with the help of a community of active contributors.

React is a library – NOT a framework. What makes it not a framework is the fact that it is not a complete solution and we will often have to use additional libraries with React to form any front-end solution. But what makes React stand out from other practices?

1. Predictability and Declarability

Let’s take the following code example:

If you can figure out how a page would look like in a matter of second only by looking at some lines of code, that’s already an advantage. This is what we call declarative code.

“Declarative code describes what we want, as opposed to imperative code that tells how to do it.”

The difference between then can be explained in a simple manner. Imagine yourself going to a bakery. When you get there, you can ask the bakes either:

a. Can I please get a rosemary bread?

b. Dissolve sugar in warm water in a medium bowl, and mix in the yeast. Mix in salt, butter, 1 tablespoon rosemary, and Italian seasoning, 2 cups flour. Line a baking sheet with parchment paper. Place dough on the baking sheet. Cover, and allow to rise 1 hour, or until doubled in size. Place in oven at 190 degrees C. Please?

The option a. is the declarative way. It presents less bugs, less misunderstanding, it has a smaller volume and it’s easier to adapt to it.

Because each line of code in the image above is “describing” what it represents, they are called components. Which leads to the second point:

2. Componentization

Usually, a React App is made up by a multitude of components. This contributed to the reusability of code, the components having the ability to be easily repeated across multiple pages. This saves valuable time on development and testing, having a single source code for problems that might appear in more than one place across the application.

3. JSX

Although it may not be appreciated by everyone, JSX is a great way to bring the JavaScript advantages in an environment that resembles the HTML markup. It allows you to use conditional rendering, to call functions that return JSX as a value, to inject convenient ES6 features right in your HTML-like code.

4. Mutations

In order to make changes to the state of a component, in React you have to use the setState() function. This extra step is because the state is a valuable piece of information and any change made to it can affect your component’s behavior. We can also take this additional explanation by Revanth Kumar:

“This is because React wants to re-run certain life cycle hooks, [such as] componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate, whenever state changes. It would know that the state has changed when you call the setState function. If you directly mutated state, React would have to do a lot more work to keep track of changes and what lifecycle hooks to run etc. So to make it simple React uses setState.”

5. React Native

With a popularity and performance above the charts, React Native is a powerful tool for building native mobile applications. Is has a structure and logic similar React JS, and it is easy to pick up if you come from this environment. It uses the same code to build applications on iOS as well as on Android, while giving you the advantage of using components native to your platform in the application.

Conclusion

With many advantages not covered in this article, React keeps attracting the developers’ interest, being the library that revolutionized how we write and treat front-end code nowadays. With an active community and support from the many corporations that use it (such as Netflix, Airbnb, Yahoo, Atlassian, Coursera, Uber, WhatsApp, Dropbox, etc), we can only predict a long and successful life for React.

Share: Facebook Twitter Google Plus Pinterest

webamboos | Blog

Reactjs Overview

5 comments

My Instagram