What is React ? Why React ?

#react #javascript #webdev #beginners

React, React, React you may have heard this term thrown around quite a bit in your web-development endeavor. Being a newbie myself I know how simple yet terrifying this word sounds. Being in doubt myself the initial step that we all take was to google it and there comes the monster a heck load of documentation, definitions, tutorials, tips, tricks, and whatnot. A simple question dropped me into a labyrinth of search results just enough to intimidate me to keep my curiosity aside and close the tab.

More than educating me this started to create a sense of fear around React. Why was there not a simple enough answer to my question. What is React? Why is there so much buzz around it?

So without getting into too much of technical stuff in the beginning, lets turn some pages back . Into the past we goo.

Before the JavaScript frameworks era almost all of the web pages on the web used to be built to the all-important trilogy of webpage building: HTML, CSS, and JavaScript. Each file would do its part. HTML was used to give the basic structure to the webpage and the content it held, CSS in turn was used to describe the HTML elements on how they should look and how will they be placed. While JavaScript was used to give functionality to these HTML elements. For even the simplest functioning webpage we needed to create an HTML file, a CSS file, and a JS file, and the tricky part of connecting the HTML elements with that JS functionality.

In the below example you can see that just for creating a simple button to display a msg when its clicked we had to write these three files with the distinct amount of code in each of them.

This was such tedious work for just the simple functionality. but as the complexity of the webpage goes on increasing the complexity of the code and becomes too much to keep account of.

In comes the framework era with various JavaScript frameworks being introduced namely jQuery, AngularJS, VueJS, React, etc. Sticking to React. React was introduced by a software engineer at Facebook in 2011.

Okay! enough of history now let us get to the actual details about React. Using the same example from above. It can be implemented in React in the following way. Don’t try to understand the syntax right now just look at the ease of code and the number of lines required

The advantage here with React is the HTML element (component) along with its JS functionality are all merged into a single JS file. Thus, reducing the work of writing those endless query selectors for every element that you are going to use and keeping a track of those variables associated with each of them.

Now think that we had to repeat the same button and functionality two times, ten times, or maybe a hundred times or even more. Think how ridiculous it would be writing the same code again and again and then the number of variables would be needed to handle that functionality on our old way of vanilla JS. This does not seem practical. Here comes the second advantage of using React component reusability .

We have just used the above example again but we have made 10 buttons here with 10 output messages , just look how easy it is to reuse a React component.

Hush, React is the savior for this case we just had to write the component once, and voila React lets me use it as many times as we want and we can just import the same component anywhere on my website and it would still work as it is told to. Such a relaxing feeling ain’t it !?

Though you know what isn’t that much of a good feeling when we are on a website and we just click on a button to go on some other page on the same website and it takes time to load that page. Like we are already on their website still for going from one page to another we need to wait ain’t fair, is it? Do you know what can help us in this scenario as well?

Yup! you guessed it right React ! with some handy React library we can create single-page websites i.e. pages within the websites load within the blink of an eye. sounds cool right no more waiting time. There is such a bunch load of other libraries that are made or being made to make your coding experience as easy and smooth as possible.

All you need to do right now is take that leap of faith! React is a fun tool to work around the more you work with it the more efficient it would get the more stuff you would know the easier the journey gets! So go ahead and begin your own React journey Chief!