Fundamentals of React

Sakibuddin
3 min readMay 9, 2021

--

Before talking about React fundamentals we should know about react. What is React? React is an open-source front-end JavaScript library that is used for building user interfaces especially for single-page applications. It was created by Jordan Walke, a software engineer working for Facebook. It is used for handling the view layer of web and mobile apps.

The major features of React include:

  • It uses Virtual DOM instead of Real DOM considering that Real DOM manipulation is extravagant.
  • It supports server-side rendering.
  • It follows unidirectional data flow or data binding.
  • It uses reusable/composable UI components to develop the view.

Now, we will move on to the Fundamentals of React.

Component

React component is a JavaScript function that returns a React element. It can’t return “undefined” (either explicitly or implicitly). It has to return a value or null. On the other hand, the React component is a part of the user interface, template, blueprint & global definition. This can be either a function or a class with a render method. Components are re-usable and can be nested inside other components.

JSX

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically, it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below text inside <h1> tag return as a JavaScript function to the render function.

class App extends React.Component {
render() {
return(
<div>
<h1>{'Hello world!'}</h1>
</div>
)
}
}

Virtual DOM

Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from react components and updates this tree in response to mutations in the data caused by actions.

Each time the data changes in a React app, a new virtual DOM representation of the user interface is created.

There is where things get interesting. Updating the browser’s DOM is a three steps process in React. Whenever anything gets changed, the entire UI will be re-rendered in a virtual DOM representation.

The difference between the previous and the new virtual DOM will be calculated. The real DOM will be updated with what has changed.

Props

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.

State

Its working concept is the same as props but the difference is state-managed within the component. Let’s have a look at some difference between props and state.

Photo by Constance Crutchfield

Reconciliation

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

Component Lifecycle

Mounting — when an instance of a component is being created and inserted into the DOM.

Updating — when there is a change in state or props in a component then updating happens.

Unmounting — This method is called when a component is being removed from the DOM.

Error HandlingError Handling is used when there is an error during rendering, in the lifecycle method or in the constructor of any child component.

That’s it !. Wish me a stroke of good luck!!!

--

--

Sakibuddin

I am Sakib Uddin from Bangladesh. I am a front End Developer