Basics of React; A Theoretical View

React is JavaScript Library which is declarative in nature and works great with dynamic data(unlike HTML). The React library is used for User Interfaces.

As defined earlier, React is a JavaScript library and not a Framework which raises a question:

React being a library and not a framework is good. But Why?

Here's why:

• Frameworks are not flexible as they require you to follow rules.
• Frameworks are full of features and difficult to customize.

Prerequisites for React:

1. Basics of Javascript(Variables, Objects, Functions, Loops)
2. Learning JS(https://jscomplete.com/learn)

So why should you use React?

• The ability to work with a friendlier and optimized VIrtual Browser (Virtual-DOM) as compared to Real DOM.
• You just need JavaScript knowledge to work with React.
• React Native allows you to create Mobile Applications (iOS and Andriod).
• React team at Facebook tests all features and versions of React on Facebook.com as a result the React Library is battle-ready.
• React allows developers to declare stateful user interfaces.

Basic Concepts of React

The following are fundamental concepts of React.

React Components

There are two types of Components in React.

1. Function Component: Simple JavaScript functions which are commonly used. Syntax of Function Components is specified below:

import React from "react";

function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

2. Class Component: These components are simple classes (made up of multiple functions that add functionality to the application). Syntax of Class Components is specified below:

import React from "react";

class ClassComponent extends React.Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

A question that many JavaScript and HTML coders might ask… How is HTML code working inside a JavaScript syntax?

And the answer is: It is not JavaScript but a syntax extension to JavaScript called JSX.

Behind the scenes, there is a special compiler named Babel working to convert JSX into React API calls.

Both types of React components have the following similarities

• The components receive inputs which are called “props”.
• The components output a User Interface Code which is later rendered.
• The React components are reusable and composable.
• You can use a React component as a regular HTML element.

React Hooks

The react hooks let you use state and other React features without writing a component.

Lets take useState() function as an example.

useState function returns two items

1. State Object (getter)
2. Updater function (setter)

Example of useState():

import {useState}
function Random() 
{
  //count is getter object
  //setCount is setter function which sets new state
  //0 in useState(0) is default value
  const [count, setCount] = useState(0)
  return <button onClick={()=> console.log(Math.random())}> </button>
}

React Virtual Views in the Memory

• React generates HTML using Javascript rather than creating complex HTML with loops and conditions.
• React uses Tree Reconciliation or Diffing Algorithm which compares both views/trees, identifies the changes, and updates the DOM.

Thank you for reading this post, I hope you enjoyed and learn something new today. Feel free to contact me through my blog if you have questions, I will be more than happy to help.

Stay safe and Happy learning!