All About React.js

Library vs Framework

What’s the difference between the library and the framework? It’s a common question for beginners. Well, if you search for google you’ll find a lot of answers about it. Maybe they are good but as a beginner, you may not understand everything every single detail and complex method. Now I’m gonna tell you something about it. Library means a small thing in programming compared to the framework. For example, if a tree is a framework than it’s branches are library. Now, you should understand what the is framework. The framework is a larger thing. Libraries are light, frameworks that are heavy. Same as a tree and its branches. If you use any library for front-end development you’re not bound to something that means you're flexible. But if you use any framework you're tucked. Both library and frameworks have their own advantages and disadvantages. You can easily find them on google. I’m not gonna explain to them to keep my article short.

React.js! Library? Framework?

: It’s a framework;

: It’s a library;

: No! framework;

: No! library;

Stop!!! stop fighting. Some people say it’s a framework and others say it’s a library. Well, both are right and both are wrong. I think you have got a clear idea after reading the first section of this article. From my point of view react is a library but it can do everything as a framework does. React.js is a smaller library than others I mean angular vue.js. Angular and vue.js are officially called a framework. They’re not flexible while you're working. React.js is light and more efficient. You can install other libraries as your needs on it. That makes react.js light. But in others (i.e. angular or vue.js) every library that could be useful but you don’t need them are preinstalled. It makes them heavier. To clarify I can cite an example, suppose your wife sent you to market for rice. When you arrived you think well how can I eat rice without vegetables or meat! then you bought some meat that makes your bag heavy. Here, before buying meat you’re in react state. And after buying I mean with filled up bag you're at angular state. I think you have got your answer.

Why React is Called ‘React’?

React is called ‘react’ because it reacts 😝. Yes, it’s not a joke what you read. Let me clarify, look, what react do? react actually render things on UI. And it has its own rules to do so. When something is changed on UI because of user interaction or somehow react reacts immediately. I mean react render updated UI to users. We all know that react do its job by creating a virtual DOM. React always save DOM in the browser, and only changes those parts which are changed. But normally without react it always updates the whole DOM. Suppose, you have used a clock that is ticking every second, and to do this you have used set-interval. Now, in every second your web page will be refreshed. This will make your site heavy. If you use react then only the state of the clock will be refreshed so your site will be light and more efficient. From this it’s clear react is component-based and when something in component changed react reacts immediately.

Virtual DOM…!

What is DOM? What is a virtual DOM? How its work? DOM refers to Document Object Model. It’s a bit complicated thing. In short on a web page, you see body>div>section>a>p> etc. Everything inside the body makes DOM. And When you update something or something changes inside DOM the webpage reloaded. Virtual DOM term is used by react.js. In react whenever something is changed inside body first it goes to virtual DOM. Virtual DOM utilizes what is changed and how to update it. Normally this is a long process if you don’t use react. For example, if you make a calculator app when you click on the = button one thing will be changed. Virtual DOM will change only the output not everything inside the body.

JSX

Normally, when we write code we use HTML. In the body, we write the skeleton of a webpage. To write javascript have to use script tag or a javascript file. But in react JSX we can write HTML and javascript without hassle. We just need to insert a pair of curly brace. For example,

view:1

<body>

<div id=’clock’/>

<script>

document.getElementById(‘clock’).innerHTML = `${(new Date().toLocaleDateString)}`

</script>

</body>

view:2

<div>

{

(new Date()).toLocaleDateString

}

</div>

In the second section, I have used JSX. That’s why there was no necessity to import scripts to write javascript…

Change Style Dynamically Using JSX

Sometimes we need to change the styles of an element dynamically. For example, for the pending state, we want orange, for done state green, for canceled red. By using JSX it’s so easy and fun for me. Hope you’ll find it easier too. Suppose there is a state you're getting it from props. And for each state, you want unique color. How can you do that? so simple:

<p style={{color: state === ‘canceled’ ? ‘red’: state === ‘pending’ ? ‘orange’ : ‘greed’> {state} </p>

If you don't understand use this code in your react project. Then give me thumbs up.

Camel Case

What is a camel Case? It’s a common term for developers. In some cases you cannot use underscore or hyphen(-,_). Then you’ll need to use camel case . How to write camel case. It’s so simple. If you want to write ‘hello world’ in one word how will you write it? You may write ‘hello-world’ or ‘hello_world’ or ‘helloWorld’. Yes, the last one is called camel case. Did see camel in real life? if your answer is no search on google. Did you notice the middle part of a camel’s back is the upside? Yes, when you write camel case the middle part of your word is always upside. That’s why it is called camel case. You must need to use camel case if you use react.

useState hooks

useState hook is an important thing to react. React has a lot of hooks. But why I am talking about useState here? Because React is all about state. Whenever it finds any state changed it rerender the page immediately. This the magic part of react. To use react properly you have to import it first. Then you will set the initial value. Whenever the initial value changed the component that holding this state will rerender. I said first React is component-based. It doesn’t refresh the whole page but only the components. That‘s why the state is so important in react.

Some important things

There are some important things you should keep in mind while using JSX. You always use (-) hyphen in javascript. For example, on-click, onclick, onchange, onsubmit etc. While using JSX you can’t do so. You have to use a camel case instead of a hyphen(-). Because sometimes they are same as JSX’s reserve word. For example, class is a reserve word for JSX. So, you have to use className instead of class to apply any style or anything else. Another thing, if you want to apply the inline style you have to write them in an object style. For example:

<p style={{color: ‘red’, backgroundColor: ‘green’}}>Hello Bangladesh</p>

Another important thing is that while using the inline style you have to write property names in the camel case. And you have to put values inside quotes.