React is a JavaScript framework built by Facebook to make interactive UI easier. React allows us to design simple views for each state in our application, and it will efficiently update and render just the right components when the data changes.
The cool thing about React is that it allows us to write declarative components. It means that we can write a component that will display something and give it a name just like we do to a JavaScript function. Then, we can reuse the components whenever we require them. The components can even take arguments and display different results depending on the arguments. So, it’s just like a function in programming languages.
The main reason why web developers love components is that they are effortless to work with and we can debug and reuse them. Let’s try to find the usefulness of a component with an example. Suppose I want to create a simple rock paper scissor game in HTML, CSS, and JavaScript. I created a game using only these three languages and the end result was a mess. This game is fairly simple and it is not that complex.
But the three files have grown too large and it has become hard to debug and even understand what the code is doing. To give you an example of how big the file has become, the index.js file has about 150 lines of code, which is not that long for a game but since it’s all written in a single file. It is really hard to work with this line of code. Not only this, the HTML file is becoming more of a problem because there is so much nesting and it is really hard to know what div is doing what.
Also, we have other things to worry about like lifecycle methods and other features. That’s where React comes to the rescue. Instead of making all these HTML, CSS and JavaScript files separately and writing all of the codes for HTML, CSS, and JavaScript in one file, we can make a React component that does one thing and we can import those components in a root file and build exactly what we want in a lot cleaner and easier way.
So, let’s try to understand what I am saying with an example. In the Rock Paper Scissor game, we will have three buttons in which almost all their functionalities will be the same but they will just have a different id and a different icon for the choices i.e. Rock, Paper, and Scissor. In Vanilla JavaScript, what you have to do is to create three divs with almost all the same HTML tags and CSS styles and you just have to change the image src and the id. While there is no harm in doing that, it makes the code harder to read because it’s just a div element and there are three of them and it does not explain anything about what they are doing.
<div id="paper">
<img src="Paper.jpg" value="0" class="choice-selector"/>
</div>
To avoid this problem, in React, you can write a component named ChoiceSelector (you can call whatever you want I just call it because I want it to) and there you will write the almost same thing that you have written before in the vanilla JavaScript but there instead of writing three divs and manually changing the id and icon of choice, you will accept props in the components and depending on the props value you can display the choice selector for paper, rock or scissor. So here is the code for the component:
function ChoiceSelector({src, value, name}) {
return (
<div id={value} onClick={handleClick}>
<img src={src} alt={name} />
</div>
)
}
With these few lines of code, you can write the ChoiceSelector and pass the src, value, and name as props like this:
<ChoiceSelector src="Paper.jpg" value={0} name="Paper"/>
Like this, you can make the ugly lines of vanilla JavaScript into a single line and you can even go a step further and instead of passing the props hard coding and you can create an array and store all the arguments into the array and return it like this:
const choices = [
{src: "Paper.jpg", value: 0, name: "Paper"},
{src: "Scissor.jpg", value: 1, name: "Scissor"},
{src: "Rock.jpg", value: 2, name: "Rock"}
]
choices.map(({src, name, value}) => (
<ChoiceSelector src={src} name={name} value={value} key={value}/>
))
So this is essentially React’s beauty and is just the tip of the iceberg. There are many other cool things that you can do with React other than this. But pat yourself as you have started writing React codes and in significantly less time, you will become an expert of it without you even becoming aware of it.
As you can see from the code above, overall in React, you may write more code than you do in Vanilla JavaScript but using React, your program is more readable and is a lot cleaner and even a beginner can just look into your code and tell us what the code is doing because the code is declarative. And that’s what is done in professional web development, codes are written so that humans can understand so you should always try to write declarative programming unless it’s for speedy algorithms and other things.
Knowledge Glutton 