React Fundamentals

Rokonuzzaman Robin
3 min readMay 7, 2021

What is React?

React is a JavaScript library developed by Facebook. ReactJS offers some great solutions to some of front-end programming’s most persistent issues, allowing you to build dynamic and interactive web apps with ease. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React.

What is DOM?

The Document Object Model or DOM is created by the browser when a webpage is loaded. In graphical form, it's like a tree of elements also called nodes, which are used to represent every single element on the page.

What is virtual DOM in React?

The Virtual DOM is a tree of JavaScript objects that represents the actual DOM.

One of the interesting reasons to use the Virtual DOM is the API it gives us. When using the Virtual DOM we code as if we’re recreating the entire DOM on every update.

This idea of re-creating the entire DOM results in an easy-to-comprehend development model: instead of the developer keeping track of all DOM state changes, the developer simply returns the DOM they wish to see. React takes care of the transformation behind the scenes.

This idea of re-creating the Virtual DOM every update might sound like a bad idea: isn’t it going to be slow? In fact, React’s Virtual DOM implementation comes with important performance optimizations that make it very fast.

The Virtual DOM will:

  • use efficient diffing algorithms, in order to know what changed
  • update subtrees of the DOM simultaneously
  • batch updates to the DOM

What is JSX?

JSX is a form of markup used in React. It looks very similar to HTML but is converted to JavaScript behind the scenes. While this looks very similar to Html, we are writing this in a Javascript file, so the code must be getting converted to Javascript. To understand how this conversion occurs, you must first understand how the React library uses Babel.

What is Babel?

Javascript is a constantly evolving programming language. Several different versions of JS have been implemented which have added updated syntax and functionality to the language. Most of these updates make Javascript easier to work with. However, as these newer versions of Javascript have been released, browsers also need to update to account for these changes. If you try to run some new fancy version of Javascript in a browser that does not support it, your code will not work, and you will not be a happy developer.

This is where Babel comes into play! Babel is a tool that compiles all of your Javascript into an older version (ES5) that all browsers support. This means you can write all the fancy Javascript that your heart desires, and you don’t have to worry about it not working on various browsers.

What is React Components?

React is a JavaScript library that makes user interface by component base structure. React has two types of components, class components and functional components.

Class Components:

Here is an example of class components:

Functional Components:

Here is an example of functional components:

What is Props?

Props are plain Javascript objects that contain information. They can be used to pass data between React components.

What is State?

The state is also a plain Javascript object that contains information. It represents the dynamic parts of the React component, that data that can change.

Thank you for reading. We will talk more about react another day.

--

--

Rokonuzzaman Robin
0 Followers

Web Developer || MERN Stack Developer || Programming Enthusiast