Week 3 : Taking a look — React.js

Always heard of React.js while tilting to be a web developer? Let’s look into it then, exactly what is React.js and why it is used!

Before learning anything, its always good to ask these 3 questions — (1)What is it (2) Why is it and (3) How is it/How I am going to learn it?

What is React.js?

React.js which includes — the word ‘js-(JavaScript)’ in itself — Is it something related to JavaScript? But what? We already have JavaScript to handle webpages over a browser using certain event handlers and DOM methods, isn’t it? Then, what is React.js? Let me answer this question.

Define (as everyone does😐): React is a frontend, JavaScript library for building UI/UI components, created by Facebook.

In simple words, it is used to build a website in a very clean and ordered manner. But why do we actually use React.js? — A logical question, right? Let’s see.

Why React.js?

Would it be relevant to just make a website using HTML, CSS and JavaScript. Yes, of course( from your point of view). No, actually not (from my point of view).

Why not? 🙄 Let’s take an example to understand it.

Suppose, one of your younger siblings want to fill color in a sketch of an apple. Firstly, he filled red color in it. But now, you taught him that there isn’t just a red colored apple. There is a green colored apple also available. So, he now wants another sketch of an apple to color green in it. Would you draw another sketch of an apple for him or would you like to reuse the previous one? Obviously, reuse! Thus, drawing another sketch is exactly rewriting your code for the same purpose again and again — which directs you towards HTML and CSS while, reusing it — directs you towards React.js. Thus, React.js helps to reuse the code again using something known as ‘modules’.

But modules, that is a JavaScript functionality, isn’t it? Then how could we reuse our HTML code in that? Thus, for this, React.js offers ‘JSX’ — JavaScript XML, which allows you to integrate your HTML code into JavaScript. Such an amazing concept!

In the above example, what if I want to replace my green color with red color keeping the same sketch of apple? That is something known as ‘template’ — filling in different values in the same structure just by providing/passing these values(using a React.js functionality known as ‘states’ and ‘props’) to it by not writing the whole code again which in turn leads to a faster development😎. Also, it includes a concept — Virtual DOM(will cover this concept soon) which leads to a higher speed.

Also, due to several such advantages, React.js is currently the hottest growing framework in the industry.

Aren’t you overwhelmed by these advantages for learning React.js? Yes? Then moving to our last question how would you learn it.

How would you learn it?

You can connect me via LinkedIn or by clicking the ‘follow’ button above to cross the journey with me or could dive into this documentation on your own or can learn it from this amazing resource for free!

Happy Learning!👩‍🎓