Some Basic Fundamentals For React Developers

2 min readMay 7, 2021

What is React?

React is a front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach which helps in building reusable UI components. It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

Let's talk about some basic concepts of react.

⭐ JSX

JSX is a syntax extension to JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

⭐Component

The smallest and most important feature of React is the Component. React Component is actually a Javascript Function or Class which holds special features for React. Its main duty to make an interactive user interface.

React components may be small or large in size. But generally, the large component is divided into some smaller parts applying some logic. Those divided parts finally joined together and make a composition to create a large-scale project.

⭐ What inside a Component?

The React component is divided into two major parts

Data and logic layer
Representation Layer

Data & Logic Layer:

Every occurrence in react is happen based on Data. The user interface must be dynamically linked with the data. So it is important to manage the logic and UI according to the data flow. The management system is made and handle from this layer.

Representation Layer:

Though Data Layer is important for React Component but we can create a component without it. For the View or Representation layer, it is impossible to make a react component without it. In React browser JSX is used to show anything. The representation layer is actually a static layer.

⭐State

In react, data is stored in a state. This is an important system to store data in react. Because UI only dynamically change with the change of the state data. Other variables or properties can’t affect the representation layer.

⭐Higher-Order Components(HOC)

Higher-Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components that wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC is ‘pure’ components.

…coming more