Doubt about React in Javascript

Question

I am a C programmer and recently I started studying Javascript, I already have a notion of programming but as I come from a language relatively "simple" I am facing difficulties in understanding this language front-end.

The basic commands and syntax I’m already getting the hang of but when I see people talking about frameworks I get confused. Having said that, I started researching about React (which is a library, right?), but I still don’t understand why people use it, I’ve already programmed it in pure Javascript and when I go to program with React I particularly don’t see the difference, beyond so many functions that are there and I don’t understand.

My question is: why use React? What is the difference between pure JS and with libraries, frameworks etc? I’ve been told that if you master a framework you don’t need to know much about HTML and CSS, that’s true?

And if you could point me to study materials on this sort of thing, I’d appreciate it. I like programming but sometimes I get scared by the immensity of things that exist in this universe.

Answer 1

What is the React?

Like defined by its creators, React is "a declarative, efficient and flexible Javascript library for creating user interfaces (UI)”.

This library appeared in 2011, on Facebook, and is now used in the interface of the social network news wall.

The following year, also joined the technology area of Instagram and several other tools of the company. In 2013, the open source to the community, which contributed to its great popularization.

The image below shows a comparison of the use of React with other technologies (Angular and Vue.js):

In an React application, you should break down the different elements of it into small reusable components. Every time something is complex, break into small parts and develop these components, this technique is called Component Driven Development.

But what about this React? It’s like an Angular right?

No! Angular is a framework, that is, a set of tools to solve various kinds of things. Already a library serves to solve a specific thing, in the case of React is to render components. But I’m not going to go into it too much because it’s already been answered here.

But why use?

Precisely because it has a specific goal, its implementation is fully geared to this and consequently ensures better performance and better ways to use.

The people who created React made a article well-rounded as to why they created and some of their advantages.

In short:

• Easy to create small, reusable components;

• Work with the Virtual DOM approach, which is much faster than the native DOM. You can see better about this here;

• React can run on the server side, allowing for better SEO;

• Unify Markup and view logic, facilitating extension and manipulation.

How it works?

The main magic of React is indeed the use of Virtual DOM, but how it works?

As we all know the DOM is super slow and we should avoid to the maximum manipulate it in excess, since we would need to do many repaints and reflows, that would cost a lot to our browser.

That’s where React shines!

When a component is initialized, the render method is called, generating a view representation. From this representation, a Markup is produced and injected into the document. When some data changes, the render method is called again and for us to have a more efficient update possible, React makes a differentiation (diff) of the new value with the old value and applies in DOM only the new change.

Follow an example below:

As we can observe, it initially has the "original" copy of the component and the state that it should have afterwards, for this it makes a differentiation between the 2 models in Virtual DOM, see what needs to change and have applied, only after that the operations are done in the real DOM.

I’ve been told that if you master a framework you don’t need to know much about HTML and CSS, that’s true?

It all depends on the context, there are numerous frameworks if it meets everything that will do in your project is not necessary a great skill in CSS, but if at some point the same has a limitation - what is very common - enters your knowledge in CSS. And clarifying better in this case the framework is only for CSS, because HTML only creates the structure of the site, then HTML for sure you will have to know.

Concluding

Both libraries and frameworks are used to meet a need, and mainly to facilitate the life of the programmer by often decreasing the time that would be spent doing the same with pure JS as is the case cited.

Now entering the advantages of using React, one of the biggest advantages I see is the API. Those who already have experience with Javascript, which is the language in which it is written, can easily absorb the entire React proposal.

So I think this is one of the biggest advantages, easy to use, quite performative and brings several advantages still in productivity for those who are writing, because it has a very good level of abstraction. It consists in her actually giving you what you need, and leaving you focused on solving the problems for the customer, which is her real proposal.

---

Study materials

• The Javascript documentation itself;
• The React documentation itself (React documentation is very good, it’s practically a free course);

Some books, if you prefer:

• Getting Started with React: Building Web Applications;
• Javascript: The Definitive Guide;

---

References:

• What is React and what is it for?
• Why Did we build React?
• Starting with Reactjs
• Understand once and for all what React.JS, Angular 2, Aurelia and Vue.JS is all about