Things To Know About React

6 min readMay 7, 2021

React serves as many things just not as a verb rather it's a javascript library. Those of us who are thinking if this is a library then where are the books?
Well, this has many books that are kept in the React Documentation…

Today we will try to explore some of those books…

Okay now let's start talking about what React really is. Being a library, not a framework, and many new people who will try this may not see prebuild plugin for just plug and play. Rather this is a very beneficial way to develop our structure purely through our depth of knowledge. So the coders will love this…

Components

Components are the main focus for react. Being a part of JavaScript is a frontend beast that likes to form itself in respect of components also having the functionality and programming part of JS.

These components can be in one of two forms. Class-based components or Functional components. This is a representation of a class-based component in react.

Whereas the functional component looks like the following.

And for a simple demonstration, we can see how one code compares to another.

JS + HTML

Well if you have gone through the pictures then it is quite familiar that the internal structure looks somewhat like HTML as the tags are of that. Again, if the functionality part is looked at, we can see the javascript is the main role player.

I want to tell you that the HTML part is like the skeleton and the JS part is like the soul. Cause without the functionality of the JS the pages would be static and without the HTML there would be no structure of the page.

So, React is a hybrid of the two & having the best of both worlds.

Write Once Use Many times

Another nice thing about React is that its code can be reusable. Suppose you have written a component and you wanna use it in five different places or five different pages. So just think if you were in HTML what could you do??? Copy those lines of code and paste them multiple times. This is really not only frustrating rather it is making our beautiful workspace more redundant and dull.

But by the components in React, we will write the code for that component once and we can use that piece of code in any place just by giving the component name in the angle brackets <componentName /> and just import it from its directory, and boom it's done. No need to write the same code multiple times.

This is the power of the component in React.

Hooks

Hooks are such playful things for React and this is a very vital thing as well. We all know the importance of getter and setter methods. Also, the update functions are really useful.

For a simple demonstration, if you have a button and you want to know how many times has it been clicked. What would you do? Well With just plain HTML it is quite impossible. And JS can not do it without any structure.

So what React does is that you may do one of many things. You will use a variable where the count numbers will be stored. And when the button is clicked then you have to update that. One of the most important hooks is the useEffect Hook that does a task when the dependency array is changed. The syntax may seem like

useEffect(
 () => {    
    document.title = `You clicked ${count} times`;  
 }, [count]
);

Here the callback function will work when the count variable will be updated.

This is a very nice thing that really is a necessity to have for working in big projects cause the dynamicity is really competitive.

There are many hooks also. They are,

This is just the introduction of these players. I will separately write on them and share my thoughts on them…

Props

This is a keyword that is frequently used in the React space. When you are thinking of talking between components then you will pass the properties through this to the target function. Also, the parameters are sent through this, and in the target function, this will work as the arguments.

function PlayButton(props) {  const className = props.isMusicPlaying ? 'play active' : 'play';  return <;a onClick={props.onClick} href="#" title="Play video" className={className} />;}

Talk Between Components

Well, it is sometimes hard to send data from one function to another. But in the React space, it has been bread and butter cause talking between two functions or components is really easy.

Just what we need to know is that if we want to send data from component_A to component_B then in the component_A component we will simply call component_B and in the angle brackets we will pass the data within and in the component_b we have to fetch the data as the parameters.

So it is really a piece of cake for the talking between components.

No More Confusing LifeCycles

In the class-based components, we would have seen the lifecycle methods and their calling precedence which is a real bummer. This is a very confusing thing, especially for beginners.

So in the functional component React we are introduced with the hooks, which are very important, and took all these troubles and confusions away.

Thing s like useEffect and useMemo are some examples that really solve the confusions really easily and these hooks are really handy in each and every case.

Unidirectional flow of data

Earlier, we suggested that the state exists in a single place, and that’s the only place where things that change around in the application can be updated. The powerful aspect of ReactJS is its unidirectional flow of data.

So with the help of context, we can easily share that state in any pasts of the App and this will give us the unidirectional flow of data. Yes, the bidirectional data flow may be applauded in many test cases but unidirectional ones are really beneficial in many test cases where the app is more complex and is very useful in hose scenarios.

Virtual DOM

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

So this extension is really a nice one to have cause it really flexes all the power into React.

JSX

You can put JavaScript variables inside of your JSX and these are some of the nicest things to have, cause they will really help you in the dynamicity of the website.

Calling variables or functions within the skeleton where is really a nifty thing to have.

class Container extends React.Component {  
  render() {    
    const greeting = 'I am a string!';    
    return (      
      <div>        
        <h1>
          { greeting }
        </h1>        
        <OurFirstComponent />      
      </div>    
     );  
  }
}

Well, these are some of the important things that we should learn about React in the first place. These are really necessary things to learn.

I hope you liked it. See you again in the next blog.