Things you need to know as a react developer.

Reactions of React.

Why React.JS is needed and how it works.

5 min readMay 7, 2021

Can you guess what is the most famous JavaScript library all around the globe? Yeap you get it right, it is React.JS, the honeycomb of all the types of front-end developer bees and engineers. This article will enlighten you by the light of react knowledge. You will find out why you need React.js and how it works throughout the article. So this article is bisectional, one contains the discussion of “why react.js is needed” and another one will teach you “how ract.js works” So let’s get started.

1. Why we need React.JS:

I’ve already told how much react.js is popular among the front-end developer, now I’ll tell some point that clarifies you why react.js is so popular.

1-(I). Virtual DOM:

Document Object Model (DOM) is the object-oriented representation of an HTML or XML document. It defines a platform-neutral programming interface for accessing various components of a webpage so that JavaScript programs can change document structure, style, and content programmatically. Whenever an interaction from the user is received DOM reloads the whole webpage at once.

But in react.js, it has its own DOM name virtual DOM. The main difference between these two DOM is DOM reloads the whole page accordingly with user interaction but virtual DOM reloads only the part/ parts where user interaction is occurring.

This slight difference changes the whole game, the performance is so high in a react.js derived application than the vanilla JavaScript derived application.

1-(II). Efficiency:

Unlike vanilla JavaScript, you don’t have to go through a big file like scrpt.js rather you’ll find functionality-wise separated react components. That definitely decreases your work and work effort as well as saves your day. Oh, I forgot to mention that it also reduces the complexity of code.

1-(III). Handle Event without Event-Handler:

In recat.js you don’t have to use any event handler rather you’ll handle event react.js by just referring an event to a function or react components. That definitely decreases your code length and complexity.

1-(IV). React Hooks:

Another most used case and beautiful thing in React is Hooks. The Hook is a blessing that makes developer life easier.

So now the question is What is Hook??

If my answer is in a simple manner, The Hooks is nothing but a Function that is used only in functional components, it’s used to share stateful logic between components.

It’s not working on Class components, So, be careful don’t mix up the idea.

1-(V). UseState:

UseState is a react hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function that updates this value.

1-(VI). UseEffect:

UseEffect is a react hook that allows you to fetch something from outside functional components, it could be from the internet or another component. So in rect component whenever you import something you have to use the UseEffect hook.

1-(VII). UseContext:

UseContext is a react hook also called context API is a way to essentially create a global variable to pass data all around the React app. All the components of the app can use those data that are in context. This is the alternative to “prop drilling” or passing props from grandparent to parent to child, and only those components can use it, which are provided by UseContext.

1-(VIII). Props:

Props concept is similar to an HTML attribute, props is created along with react component creation, you can pass anything in a component from another component by props. Whenever you declare a component you can pass anything by props to the component. You can receive props at beginning of the component. The props is an object, In this object, all the passed values are found.

1-(IX). CSS in React.js:

It’s not always best practice to put all the CSS styles in a single CSS file. Because, when your project scales up, this solution may not be feasible. Sometimes you need to use CSS on your JS file also. There are so many react libraries you can use for CSS such as styled-components and styled-jsx and many more.

2. How React.JS works:

React.js is not so complex library that you have to put all of your efforts just understand, here are some concepts you’ll find handy.

2-(I). Virtual DOM:

So the working way of react.js is different from vanilla JavaScript.

2-(II). JSX:

Instead of vanilla HTML, react.js is used its own prepared mark-up language structure that is called JSX.

JSX (JavaScript + XML) is an extension of JavaScript that allows you to write HTML directly within JavaScript, which has a few benefits of making your code more readable and exercising the full power of JavaScript within HTML.

JSX is not intended to implemented by browsers, it also doesn’t signify a proposal to incorporate JSX into the ECMAScript spec. JSX’s main intention is to be used by transpilers or preprocessors to transform these tokens into standard ECMAScript.

JSX is in many ways similar to HTML, however, it does come with certain conspicuous differences. Since JSX is not a valid JS code, it needs to be compiled into JS with a tool like Babel or similar.

Hope you’ve learned something new or something known in a new way, wish you a happy BUG_FREE coding life.

Enjoy Coding…