Some Core Concepts That can take away all your Confusion about React JS

In this blog, I’ll try to clear your all confusion about React JS. And now I'm talking about what I think are the key points of React JS. Hope you’ll like it. Let’s get right into it.

What is React? Is it a framework?

React is a JavaScript library, It’s not exactly a framework. Generally, it’s used for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

React Virtual DOM

ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. The benefits of one-way data binding give you better control throughout the application. If the data flow is in another direction, then it requires additional features. It is because components are supposed to be immutable and the data within them cannot be changed. Flux is a pattern that helps to keep your data unidirectional. This makes the application more flexible that leads to increase efficiency.

React Performance

ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API that deals with HTML, XML, or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.

How to React rendering works

Every setState() call informs React about state changes. Then, React calls the render() method to update the representation of the components in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

I often compare that to a diff mechanism in Git. There are two snapshots of component tree that React compares and just swaps what needs to be swapped.

React adopts Javascript

To generate markup dynamically in React you also use JS. Consider the following example:

const [value, setValue] = useState('');
// declare a useState hook for set user input value
const handlechange = (e) => {
   setValue(e.target.value)
}
// declare a function for catch user input and set value in useState
<select value={value} onChange={handleChange}>
  {somearray.map(element => <option value={element.value}>
                              {element.text}
                            </option>)}
</select>

In the above example, the someArray array is mapped using a map function to a list of <option> elements. The only deviation from normal HTML here is a value on the <select> element that sets the selected attribute for you.

React JSX

JSX stands for JavaScript XML. JSX is an XML/HTML like extension to JavaScript. Consider the following example:

const element = <h1>Hello World!</h1>

As you can see above, JSX is not JavaScript nor HTML. JSX is an XML syntax extension to JavaScript that also comes with the full power of ES6. Just like HTML, JSX tags can have a tag name, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression. and also mind that JSX does not use quotes around the HTML text string.

React is Declarative

It means that you don’t implement any processes or procedures to render content to the browser; you just describe what you want to show and React handles it for you.

A non-declarative example that doesn’t use React might look something like this:

const div = document.createElement("div"); const text = document.createTextNode("Hello, world!"); const root = document.getElementById("root");  div.appendChild(text); root.appendChild(div);

With React this is simply:

const App = () => <div>Hello, world!</div>

We just declare that we want a div with some text and React implements the individual steps to create and append elements for us.

State in React

The state of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components. Let’s create a user component with the message state:

import { useState } from 'react';
const components = () => {
const [message, setMessage] = useState('Hello World');
return (
    <div>
        <h1>{message}</h1>
   </div>
);
};
export default components;

Props in React

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.

The primary purpose of props in React is to provide the following component functionality:

1. Pass custom data to your component.
2. Trigger state changes.
3. Use via this.props.reactProp inside component’s render() method.

For example, let us create an element with reactProp property:

<Element reactProp={‘hello’} />

This reactProp name then becomes a property attached to React’s native props object which originally already exists on all components created using React library.

props.reactProp

React event handling

In HTML, the event name should be in lowercase. Consider the following example:

<button onclick=’handleClick()’>

Whereas React it follows camelCase convention:

<button onClick={handleClick}>

In HTML, you can return false to prevent default behavior:

<a href=’#’ onclick=’console.log(“The link is clicked.”) />

Whereas in React you must call preventDefault() explicitly:

function handleClick(event){
   event.preventDefault();
   console.log(‘The link is clicked.’)
}

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name.