React Basic Concepts

In this blog, we are learning about react core concepts. React is a JavaScript library. React makes User Interfaces (UI). User Interface (UI) means what we see in the browser as a user. UIs are everywhere.

The React language

In the below for example we declare an array

const users = [
{ name: 'Emon', age: 21},
{ name: 'Rana', age: 19},
{ name: 'Iftekhar', age: 23},
];

This users array is the starting state of your UI. If you want to display them and manage them at first you need to build a UI.

<header>User List</header><ul>
{users.map(user =>
<li>Name: {user.name}, Age: {user.age}</li>
)}
</ul>
// Other form elements...

React.createElement

createElement() Create a new React element.The React.createElement function has many arguments:

  1. The first argument is the HTML “tag” for the DOM.
  2. The second argument is for any attributes (like id, href, title, etc.).
  3. The third argument is the content of the DOM element.
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div' , 'null' , 'Hello World')

The simple div we’re using has no attributes, so we used null in there.

ReactDOM.render

It is the first step for a React application into the browser’s DOM. It has 2 arguments.

  1. The first argument is WHAT to render to the browser. This is always a “React element”.
  2. The second argument is WHERE to render that React element in the browser.
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div' , 'null' , 'Hello World');
ReactDOM.render(element , document.getElementById("root"))

JSX

JSX is a syntax extension for JavaScript. It was written to be used by React and it looks like HTML. But JSX is not valid JavaScript, web browsers can’t read it directly. It means that before the file gets to the browser, a JSX compiler will translate any JSX into regular JavaScript.

Example

const myelement = <h1>I Love JSX!</h1>;

t is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like.

Components

Components are independent and reusable bits of code. They distribute the same purpose as JavaScript functions, but work in separate and return HTML by render() function. Components are two types, Class components and Function components. In this articels we will show the class components exmple.

const exampleComponent = () => {   return(
<h1>I love react. </h1>
);
};

In the eample we saw a functional comonents.

Hooks

A hook in a React component is a call to a special function. All hooks functions start with “use” word. Such as useState, useEffect, useRef, etc . Hook functions can only be used in functional components. You can’t use them in class components.

Now we will see 2 most impornts hook examples

useState hook:

The useState hook store data. We are store an array, an objects, number, string, boolean data, etc. It returns to things first one is a variables, second one is a function. Variables give data and function is used for set data.

Example —

import React, { useState } from 'react';

function Example() {

const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

useEffect hook:

useEffect hook is a most useful hook in react also useState. It used for calling API in react components, not only for calling api it has various uses like as , if you need to a conditional function you can use that hook.

Example —

import React, { useState, useEffect } from 'react';
function Example() {
const [user, setUser] = useState(0);
useEffect(() => {fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(datav => setUser(data))
}, []);
return (
<div>
{
users.map(user => <li> {user.name} <li/>)
}
</div>
);
}

How Virtual-DOM and diffing works in React

Virtual DOM :

The virtual DOM 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.

Diffing Algorithm :

React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called diffing.

React Developer || JavaScript Developer || MERN Stack