Reading
Add Comment
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.
frontend community reactjs reactjs trends
0 comments:
Post a Comment