Understanding React.js

React.js allows you to write JSX (Javascript XML) code which is similar to HTML syntax but not HTML, it’s just Javascript. It enables us to develop component-based applications and hence we can reuse the component anywhere in that project. These applications are SPA’s (Single Page Applications) and React internally uses Virtual DOM to make the rendering faster.

Let’s dive into the details about React & the lifecycle hooks

What is React?
well, what does Google say:

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

that’s cool, isn’t it? Let’s dive in then,

First of all, What is a UI(User Interface)? 😕

It is a view part of the web applications like what you see in when you open amazon.com. What you see is UI. 😄

So, What do you use to build UI and Web apps (Web application)? 😕

Traditionally we use HTML, CSS, Javascript for Front End which contains the UI and also what happens on mouse click or when you press a key. For UI we use HTML, CSS, and scenarios like when the user clicks something we use Javascript.

Then Why use React ? 😖

React allow you to build components, like a Button component, Input component, etc. Through which we can reuse the component wherever we want in that project, unlike the traditional approach where we had to repeat the same code again and again React makes our life easy.
React is also faster as it loads all the js, CSS, images files only once and then when you go to a new page in that web app unlike the traditional approach it will not reload all the js, CSS, images, HTML files again. (We will talk about this in more detail when we take a look at React Router).

OK , is there anything more to React?

yes, it has more in store for you. You see people who developed react have added two main features which makes it way cooler than the traditional approach.

• JSX (JavaScript XML)
• Virtual DOM

JSX (JavaScript XML)
It has a syntax similar to HTML but it is not an HTML code. It is JavaScript. 😠 😵

Whatever you see in the above code inside of the return is a valid JSX. Looks similar, isn’t it?

Apart from a few rules like you can’t use the keyword class it is a reserved word, every tag should have a closing tag and there should be only one parent div which intern contains other elements.

Does the browser know JSX code?

No, But we use Babel transpiler to convert the JSX code to javascript code and also to convert ES5➕ version javascript code to ES5 code which is supported by all the browsers.
As you look at the above code you’ll notice that the div with className 😕 of the card is the parent element and it contains other elements.

Wait, What’s a className?

Since I talked about a rule where it says that you can’t use a class keyword, that’s because we use keyword class to create a Class-Based Component.
In the above chuck of JSX code is a Component. and we have given it a name of Card component as you can see the function name. we can reuse this component anywhere else in the project. examples would be a Header or a Footer component which can be reused on any other page.

BONUS ✴️
There are two ways to create a react component.

• Class-Based Component.
• Functional Based Component.

What you see above is an example of a functional-based component.
And, the Class-based component? will let you google it. Although every React developer is using a functional-based component nowadays as the technology is changing rapidly class-based components are used in the older version of React because at that time react functional component didn’t support state, it was only supported in the class Based component but from React 16 it all changed. So, it’s better to know both.

What’s a State?

In react state is an object here, we store property values that belong to the component. In class-based component, we use the state keyword and in functional-based component from React version 16 onwards we use the useState hook.

In the class component, we use a state like this,

  constructor(props) {
      super(props);
      this.state = {name: "Henry"};
    }

Using JSX to update a DOM leads to significant site performance improvements and development efficiency. How? let’s look at Virtual DOM.

What’s a props?

Props are arguments passed into React components. Props are passed to child components via HTML attributes as a single object

    function Welcome(props) {  
       return <h1>Hello, {props.name}</h1>;
    }
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

Virtual DOM

What does Google say?

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

NOTE: React Fiber is the new reconciliation engine in React 16.

What’s a DOM (Document Object Model)?

The Document Object Model (DOM) is a programming interface for HTML and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document.DOM can be thought of as a Tree or Forest(more than one tree).

When a web page is loaded, the browser creates a DOM.

Here’s a pictorial representation of DOM.

So, what’s a Virtual DOM (VDOM) and why do we use it ?

In the traditional application/website which is developed using HTML, CSS, Javascript especially for the static websites it is somewhat effective to use the DOM as DOM reloads a few times as there are very few pages.

But for dynamic websites every time a user clicks something or submits something we have to reload the DOM on every click or page change(which causes page refresh).

If you use React, JSX to update the DOM then React creates a Virtual DOM (VDOM). VDOM is a copy of the real DOM and React uses VDOM to see if there are any changes in that if there are any then it renders those parts only in the DOM leaving the rest of the elements as it is.

This technique saves load time and thereby for large applications saves a lot of loading time and improves its performance. 😄

What are the lifecycle hooks in react ?

Lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.Every React Component has a lifecycle of its own.

There are four stages:
1.Mounting
— Constructor(): where you set the initial state and it runs only once.
— static getDerivedStateFromProps(): Runs right after constructor since it’s static and gets the derived state from changes in props.
— render() : You return your JSX code here.
— componentDidMount() : It runs after the component is mounted. Used to make API calls.
2.Updating
Updating happens when your state or props(properties) changes.
— static getDerivedStateFromProps() : same as in Mounting phase
— shouldComponentUpdate(): Here you can decide if you want to update the state, it has access to prevState & newState you can compare them and return true if you want to render it else return false.
— render(): same as in the Mounting phase
— getSnapShotBeforeUpdate() : It is pre-commit phase, DOM mounting happens after this method. Just before DOM renders if you need to remember where the scroll was etc. you can use it
— ComponentDidUpdate() : Whatever you do with componentDidMount() you can do it here.
3.Unmounting
— componentWillUnmount() : Here the component dies 😢

That's all Folks!"