React JS Basics

These React JS blogs are a part of my personal journey with React JS.

This blog will be a place where I write down my understanding about certain concepts in React JS. I will continuously update this blog as I go along.

ReactJS Virtual DOM

I understand that it is important to be aware of how React re-renders the UI, because it relates to performance. We want to avoid re-rendering the whole DOM as it would lead to bad performance.

React JS uses a concept called virtual DOM which is a copy of the real DOM written in Javascript, which is faster in comparison to the real DOM. The virtual DOM is different to the real DOM as it only updates the parts of the UI which has been updated.

Once the virtual DOM has been re-rendered and updated with the changes, it is compared to the real DOM, which is then updated with the changes.

Here is a great video on the concept:

JSX

JSX (JavaScript XML) is an extension to JavaScript in that it gives JS code an HTML look. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. Babel is a popular tool for this process.

Components

In React, everything is a components , components return one DOM element. There are two types of components, Stateful and Stateless.

One can think of Stateful components as those that will have state changes, after some interaction with the component. The following is an example of a Stateful component:

class MyStatefulComponent extends React.Component {   
     state = {       
         title: ''    
     }
     
componentDidMount() {   
    console.log('Component mounted')  
}

render() {    
    return <div>{this.props.name}</div>;  
    }
}

Stateless components are those that are used for presentational purposes, meaning, the component can receive data and render it, but does not manage or track changes to that data.

const MyStatelessComponent = props => <div>{props.name}</div>;

Props (Properties)

Rendering HTML Elements to the DOM

ReactDOM offers a simple method to render React elements to the DOM which looks like this: ReactDOM.render(componentToRender, targetNode), where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.

As you would expect, ReactDOM.render() must be called after the JSX element declarations, just like how you must declare variables before using them.