Fundamentals of React

  • 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.

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.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sakibuddin

Sakibuddin

1 Follower

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