REACT-18

BY
-SUDHAKAR
SHARMA
REACT INTRODUCTION
● Overview of frameworks, libraries for client

side Web applications

● React version history

● What’s New in React 18

● Understanding “what” and “why” React

● Environment Setup for React Application

● Understanding NPM commands

● Using VS Code

● VS Code extensions for ES6, React

REACT ESSENTIAL FEATURES AND

SYNTAX
● React App Project Directory Structure
 ● Overview of Webpack, Babel
● React Component Basic
● Create React Component
● Understanding JSX
● Limitations of JSX
● Working with Components and Reusing
Components
● Helloworld app in React

REACT COMPONENTS , PROPS AND

STATE
● Functional/Class/Pure Components

● Understanding and using Props and State

● Handling Events with methods

● Manipulating the State

● Two way data-binding

● Functional (Stateless) VS Class (Stateful)

Components
● Between component child communication

● Dynamically rendering contents

● Showing Lists, List and keys

● Refs

STYLING COMPONENTS
● CSS Styling

● Scoping Styles using Inline Styles

● Limitations of inline styes

 ● Inline Styles with Radium
● Using Psuedo classes/media quries with inline
styles
● CSS Modules, importing css classes
● Adding Bootstrap, Semantic UI to React apps
● Using react-bootstrap, reactstrap packages

DEBUGGING REACT APPS

● Understanding React Error Messages

● Handling Logical Errors,

● Debugging React apps using google developer

tools and React DevTool

● Understanding Error Boundaries

REACT COMPONENT LIFE CYCLE

● Updating life cycle hooks

● PureComponents

● React’s DOM Updating Strategy

● Returning adjacent elements

● Fragments

REACT HOOKS
● Introducing Hooks

● Hooks at a Glance

● Using the State Hook

● Using the Effect Hook

● Rules of Hooks
 ● Building Your Own Hooks
● Hooks API Reference
● Hooks FAQ

REACT COMPONENT IND ETAILS

● Higher Order Components

● Passing unknown Props

● Validating Props

● Using References

● React Context API

● Best practices for React Projects

● Demo apps

HTTP REQUESTS/AJAX C ALLS

● HTTP Requests in React

● Introduction of Axios package

● HTTP GET Request, fetching & transforming

data
● HTTP POST, DELETE, UPDATE

● Handing Errors

● Creating/Using Axios intances

REACT ROUTING V5 and V6

● Routing and SPAs

● Setting Up the Router Package

● react-router vs react-router-dom

● Preparing the Project For Routing

 ● Switching Between Pages, Routing-Related
Props
● The "withRouter" HOC & Route Props
● Passing & extracting route/query parameters
● Using Switch to Load a Single Route
● Navigating Programmatically

REACT FORMS AND FORM VALIDATION

● Creating a Custom Dynamic Input Component

● Setting Up a JS Config for the Form

● Dynamically Create Inputs based on JS Config

● Adding a Dropdown Component

● Handling User Input

● Handling Form Submission

● Adding Custom Form Validation

● Fixing a Common Validation

● Adding Validation Feedback

● Showing Error Messages

● Handling Overall Form Validity

DEPLOYING REACT APP TO THE WEB

REACT REDUX
● Redux principles

● Install and setup redux

● Creating actions, reducer and store

● What is React Redux

● Why React Redux

 ● Install and setup
● Presentational vs Container components
● Understand high order component
● Understanding mapStateToProps and
mapDispatchtToProps usage

REACT MATERIAL UI
ERROR HANDLING

NEW FEATURES OF REACT 18

● Automatic Batching

● Transitions

● Suspense Features

● New Strict Mode Behaviors

UNIT TESTING IN REACT

● Understand the significance of unit testing

● Understand unit testing jargon and tools

● Unit testing react components with Jest

● Unit testing react components with enzyme

WEBPACK PRIMER
● What is webpack

● Why webpack

● Install and setup webpack

● Working with webpack configuration file

● Working with loaders

 ● Quick word on code splitting, lazy loading,
tree shaking
● Setting up Hot Module Replacement

SERVER -SIDE RENDERING WITH REACT

● What is server-side rendering (SSR)?

● Why SSR
● Working with render To String and render To
Static Markup methods

DEPLOYING ON CLOUD
● Firebase Deployment
26-10-2023

What is React? What is React JS?

- React & React JS both a same.
- React is a java script library for building
interactive UI.
- React is used for building Web & Native UI.
- Web is "Web Application"
- Native is OS native applications. [Android, iOS,
Windows]

What is difference between React and Angular?

- React is a library.
- Angular is a Framework.

Where Angular is used?

- It is used in projects where lot of interactions and
flow need to be controlled client side.
Where React is used?
- It is used in project where lot of framework is
already in use backend, we just need a good front
end UI.

Why we need React & Angular?

- Modern web development have lot of challenges.
- Fluid UX
- Unified UX
- Loosely Coupled
- Simplified Deployment

What is Solution?
- Better build SPA [Single Page Applications]
- Can we build SPA with JS and JQ? Yes
- JS & JQ need lot of DOM manipulations
- Lot of coding
- Heavy
- Slow

What is solution?
- knockout js
- backbone js
- ember js
- vue js
- react js
- angular js & angular

27-10-2023

Features of React:
1. It is component based.
- Easy to reuse
- Easy to extend
- Easy to upgrade
- Easy to build

2. It uses Virtual DOM

FAQ: What is DOM?
Ans :
- It is a hierarchy of elements in browser.
- DOM uses parsing phases

markup => bytes => chars => token => node =>
DOM => layout => render => paint

FAQ: Where a button occurs in DOM

hierarchy?
Ans:
window.document.forms[].elements[]

FAQ: What is Shadow DOM?

Ans:
- It is a hierarchy of elements in a component.
- Every component have a shadow
- Shadow comprises of root and child nodes.

FAQ: What is Virtual DOM?

Ans:
- It is a copy of acutal DOM in memory.
- React uses virtual DOM that updates into actual
DOM.
- It returns result before it updates to actual DOM.
- Hence it looks faster in rendering.

3. It is faster

4. It is modular

5. It uses less memory

6. It is light weight and easy to extend.

28/10/2023 , 29/10/2023 NO CLASSES

30-10-2023

What is React?
What are the Features of React?
1. Component Based
2. Virtual DOM
3. Modular
4. Faster
5. Light weight

What is DOM, Shadow DOM and Virtual DOM?

What are the issues with React?

- It is not designed for what you are using, hence
lot of GAPs.
- You need lot of 3rd party libraries and
frameworks support.
- Faster pace of development leads to poor
documentation.

Where we can use React?

- You can use react in existing web application.
[.net, php, python, jsp, node-express, HTML
web app..]
- You can build a react application and integrate
with existing application.
[Distributed Applications]
- You can use react in Mobile Navite applications.
[Android, ios, windows ] [ionic, nativescript,
cordova, react native]

React in Existing Web Application:

1. Setup Environment for React and Web

a) Download and Install Node JS on your

PC.
nodejs.org
It will get the package manager "NPM"

C:\> node -v
C:\> npm -v

b) Download and Install "Visual Studio

Code" editor

c) Install following extentions for visual

studio code

a) Live Server
b) VsCode Icons
 c) IntelliSense for CSS class names
in HTML

2. Create a new Web Application

a) Create a new folder for your project on PC

D:\react-site

b) Open folder in VS Code

c) Open Terminal and Run the following

command

>npm init -y
[package.json]

d) Add following folders into project

a) public : To keep static

resources like html, images, videos,
text documents,
pdf, ppt, etc..

b) src : To keep all

dynamic resources like, .js, .ts, .css, .scss
 etc..

c) Add following files into public folder

index.html
home.html

React CDN :
https://legacy.reactjs.org/docs/cdn-links.html

Babel :
https://babeljs.io/docs/babel-standalone

Ex:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
 <h1>Welcome to Our Website</h1>
<p>This page is not using React.</p>
<p>React is in our <a
href="home.html">Home</a></p>
</body>
</html>

home.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script crossorigin
src="https://unpkg.com/react@18/umd/react.devel
opment.js"></script>
 <script crossorigin
src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js"></script>
<script
src="https://unpkg.com/@babel/standalone/babel.
min.js"></script>
<script type="text/babel">
ReactDOM.render("Welcome to React 17",
document.getElementById("root"));
</script>
</head>
<body>
<noscript>Please enable JavaScript.</noscript>
<h2>Home</h2>
<div id="root"></div>
</body>
</html>

31-10-2023

Creating React 18 Application

- React 18+ version re-written the library.

- React 18 introduces new features that improves
the library with functionality and approach.
- You can create a complete React 18 application
using various bundling tools.
- There are various bundling tools like
a) Webpack
b) Vite
c) Parcel etc..
- If you have installed NPM as package manager
then Webpack is in-built available.
- To create a new React 18 application with
webpack you have to run the following command
from your command prompt.

D:\> npx create-react-app appName

Ex:
D:\> npx create-react-app
shopping-react

- Open project folder in Visual Studio Code

React Project
Infrastructure

File / Folder Description

-------------------------------------------------------------
--------------------------------------------------
node_modules It comprises of library
resources.
It contains the files
related to various libraries that are
installed in your
project using NPM.

public It comprises of
static resources
[html, images, text ,
pdf, videos etc..]

src - It comprises of
dynamic resources
[.css, .js, .ts, .scss,
.tsx, .jsx.. ]

.gitignore It comprises of
configuration of resources which are to
be ignored while
collabrating with GIT repository.

package.json It comprises of
project meta data.
 [name, version,
license, dependencies..]

package-lock.json It comprises of
dependencies meta data.

Readme.md It is help
documentation for project.

- To start react application run the following

command in terminal

> npm start

- Open any browser and request the following

http://localhost:3000

- To change the initial output you have to modify

the function "App()"

src / app.js

function App()
{
 return (
<div>
<h1> Welcome to React
</h1>
</div>
)
}

1-11-2023
Summary:
>npx create-react-app shopping-react

1. Go to src folder and add a new file

"login.jsx"

export function Login()

{
 return(
<div>
<h2>Login</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text"></input></dd>
<dt>Password</dt>
<dd><input
type="password"></input></dd>
</dl>
<button>Login</button>
</div>
)
}

2. Go to index.js

import { Login } from './login';

const root =
ReactDOM.createRoot(document.getElementById
('root'));
root.render(
<React.StrictMode>
<Login />
</React.StrictMode>
);
3. Run app

> npm start

http://localhost:3000

JavaScript Topics
- Modules
- Functions

2-11-2023

JavaScript Functions
1. Function Declaration
2. Function Expression
3. Function Closure
4. Function Parameters
5. Function Callbacks
6. Function Promises
7. Function Return
8. Function Recursion
9. Arrow Functions

FAQ: Why we need a function?

Ans: Function is used to refactor the code.

FAQ: What is Refactor?

Ans: Refactoring is the process of encapsulating a
set of statements and storing under the reference of
a function or file, so that you can reuse the
statements.

FAQ: How a function is configured?

Ans: There are 2 ways of configuring a function in
JavaScript.

a) Function Declaration
b) Function Expression

Syntax: Declaration

function Name()
{
}

Syntax: Expression

const Name = function() {

}
Note: A function expression allows to change the
functionality according to state and situation. It
uses IIFE pattern. [Immediately Invoked Function
Expression]

IIFE is used for anonymous functions and

function expressions.

Syntax:
(function() {

})();

const hello = function() { };

hello();

FAQ: What is function declaration, signature and

definition?
Ans : Every function configuration comprises of 3
phases
a) declaration
b) signature
c) definition

function Hello(params)
{
 }

function Hello(params) =>

Declaration
Hello(params) => Signature
{} => Definition

Ex:
<script>
var result;
var password = prompt("Enter Password");
if(password==="admin"){
result = function(){
document.write("Success..");
}
} else {
result = function(){
document.write("invalid..");
}
}
result();
</script>

FAQ: What is role of parameters in a function?

Ans : A parameter is used to modify the function.
FAQ: What type of parameters are allowed in a
function?
Ans : Any type. Primitive, Non Primitive,
function.

Primitive => number, string, boolean,

null, undefined, symbol, bigint
Non => array, object, map, set

Ex:
<script>
function Demo(id, name, stock, cities, rating,
print){
print();
document.write(`
id=${id} <br>
Name=${name}<br>
Stock=${stock} <br>
Cities=${cities.join("-->")} <br>
Rating: ${rating.rate} [${rating.count}]
<br>
`);

}
 Demo(1, "TV", true, ["Delhi", "Hyd"], {rate:4.2,
count:3000},
function(){document.write("Hello<br>")});
</script>

FAQ: What is the max limit of parameters?

Ans: 1024

FAQ: What is rest parameter?

Ans: A single rest parameter can allows multiple
arguments.
Every function can have only one rest
parameter.
Rest parameter must be the last parameter in
formal list.
It is defined by using "...paramName".

Ex:
<script>
function Demo(title,...details)
{
var [id, name, price, stock] = details;
document.write(`
<h2>${title}</h2>
Id=${id} <br>
Name=${name} <br>
 Price=${price} <br>
Stock=${stock}
`);
}
Demo("Product Details",1, "TV", 54600.44,
true);
</script>

FAQ: What is "spread" syntax for parameters?

Ans: It allows to spread single actual parameter
values into multiple formal parameters.

FAQ: What is difference between spread and rest?

Ans: Rest is about formal parameters.
Spread is about actual parameters.

Ex:
<script>
function Demo(id, name, price)
{
document.write(`
ID = ${id} <br>
Name = ${name} <br>
Price = ${price}
`);
}
 var details = [1, "Mobile", 45000.33];
Demo(...details);
</script>

FAQ: Why a function requires "return"?

Ans: A function with return is used to build
expressions.
Expression comprises of logic and data
storage.
It allows to use the memory of function
before it is destroyed.

Ex:
<script>

function Addition(a, b)
{
return a + b;
}
function Result(){
document.write("Addition=" +
Addition(20,30));
}
Result();
</script>

FAQ: What is a function can return?

Ans : A function can return any type, primitive,
non-primitive or function.

Ex:
<script>
function Hello(){
return function(){
return "Welcome to React";
}
}
document.write(Hello()());
</script>

4-11-2023 5-11-2023 NO CLASSES

6-11-2023

Creating a new React Application:

D:\>npx create-react-app appName

 React Components

- A component is a template with markup, styles

and functionality.
- Markup is defined with HTML.
- Styles with CSS.
- Functionality with JavaScript or TypeScript.
- A component can be designed in React using

a) JavaScript Function
b) JavaScript Class

Designing a Component with JavaScript Function:

1. A component function can be configured using
a) Expression
b) Declaration

const Login = function() {

}
(or)
export function Login() {

}
2. Every function component must return mark. It
can't be void.

export function Login() {

return (
<markup> </markup>
)
}

3. Function uses JSX as language hence there are

certain rules to follow for JSX.

a) A function must return markup only as one

fragment.

return(
<h1>React</h1>
=> invalid
<p> JavaScript Library </p>
)

return(
<div>
<h1>React</h1>
=> valid
<p> JavaScript Library
</p>
 </div>
)

return(
<>
<h1> React </h1>
=> valid
<p> JavaScript Library </p>
</>
)

return(
<React.Fragment>
<h1> React </h1>
=> valid
<p> JavaScript Library
</p>
</React.Fragment>
)

b) It can't have void elements, every element

must have and end token.

return(
<div>
 <img src="pic.jpg">
=> invalid
<input type="text">
=> invalid
</div>
)

return(
<div>
<img src="pic.jpg"> </img>
=> valid
<input type="text">
</input>
</div>
)
(or)
return(
<div>
<img src="pic.jpg" />
<input type="text" />
=> valid
</div>
)

c) You can't use attributes for elements,

only properties are allowed.
 <img src="" /> =>
valid
<img class="" /> =>
invalid
<img className="" /> =>
valid

4. All components must be inside "src" folder.

5. Typically every component comprises 3 files in

real-world application

a) login.js
b) login.css
c) login.test.js
[login.spec.js]

- ".js" file comprises of markup and logic

- ".css" file comprises of styles
- ".test.js" comprises of test cases.

Note: Markup and logic can be defined in ".jsx" or

".js"

Ex: Design a register component for React

Application and Start with Register.
1. Go to "src" folder and add a new folder by
name "components"

2. Add "register" folder into components

3. Add following files into register folder

register.jsx
register.css

register.jsx

import "./register.css";

export function Register()

{
return(
<>
<main>
<form>
<h2>Register User</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text" /></dd>
<dt>Password</dt>
 <dd><input
type="password"></input></dd>
<dt>Age</dt>
<dd><input type="number" /></dd>
<dt>Email</dt>
<dd><input type="email" /></dd>
</dl>
<button
className="btn-register">Register</button>
</form>
</main>
</>
)
}

register.css

form {
border:1px solid gray;
box-shadow: 2px black;
padding: 20px;
border-radius: 20px;
width: 20%;
}
main {
display: flex;
justify-content: center;
 align-items: center;
height: 100vh;
}
.btn-register {
background-color: black;
color:white;
font-size: 20px;
padding: 5px;
width: 100%;
}
input {
width: 100%;
font-size: 20px;
}

4. Go to index.js in src folder

import { Register } from

'./components/register/register';

const root =
ReactDOM.createRoot(document.getElementById
('root'));
root.render(
<React.StrictMode>
<Register />
</React.StrictMode>
);

7-11-2023

Setup Bootstrap for React Project:

1. Install Bootstrap and Bootstrap Icons from
terminal

> npm install bootstrap --save

> npm install bootstrap-icons --save

2. To use bootstrap and icons in all components,

you have to import in "index.js"

import
'../node_modules/bootstrap/dist/css/bootstrap.css';
import
'../node_modules/bootstrap-icons/font/bootstrap-ic
ons.css';

3. You can use bootstrap and its icons in any

component by refering to their
class names.

Ex:
register.jsx
export function Register()
{
return(
<>
<main className="d-flex
justify-content-center mt-4">
<form className="border border-2
border-dark rounded p-4">
<h2 className="bi
bi-person-fill">Register User</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text"
className="form-control" /></dd>
<dt>Password</dt>
<dd><input type="password"
className="form-control"></input></dd>
<dt>Age</dt>
<dd><input type="number"
className="form-control" /></dd>
<dt>Email</dt>
<dd><input type="email"
className="form-control" /></dd>
</dl>
 <button className="btn btn-primary
w-100">Register</button>
</form>
</main>
</>
)
}

Netflix Design:
1. Add a new folder into project "src" by name
"Netflix"

2. Add following components hierarchy

-netflix-index
netflix-index.jsx
netflix-index.css
-netflix-header
netflix-header.jsx
netflix-header.css
-netflix-main
netflix-main.jsx
netflix-main.css
-netflix-register
netflix-register.jsx
netflix-register.css
Note: You can access and use any component in
another component by following 2 steps
Step-1: Import the component library

import { NetflixHeader } from

'../netflix/netflix-header/netflix-header';

Step-2: You can access by using

component selector

<NetflixHeader> </NetflixHeader>
(or)
<NetflixHeader />

NETFLIX REGISTER:-

NETFLIX.REGISTER.JSX:-

export function NetflixRegister()

{
return(
<form className="mt-4">
<p>Ready to watch? Enter your email to
create or restart your membership.</p>
 <div className="input-group
input-group-lg">
<input type="email" placeholder="Your
email address" className="form-control"/>
<button className="btn btn-danger
ms-2">
Get Started <span className="bi
bi-chevron-right"></span>
</button>
</div>
</form>
)
}

NETFLIX-HEADER:-

NETFLIX HEADER CSS:-

.brand-title {
font-size: 30px;
color:red;
font-weight: bold;
font-family: Arial;
}
NETFLIX-HEADER.JSX:

import './netflix-header.css';

export function NextflixHeader()

{
return(
<header className="p-4 text-white d-flex
justify-content-between">
<div>
<span
className="brand-title">NETFLIX</span>
</div>
<div className="d-flex">
<div className="input-group">
<span className="bi bi-translate
input-group-text"></span>
<select className="form-select">
<option>Language</option>
<option>English</option>
</select>
</div>
 <button className="btn btn-danger
ms-3">Signin</button>
</div>
</header>
)
}

NETFLIX-INDEX:-

NETFLIX-INDEX.CSS

.bg-image {
height: 100vh;
background-image:
url("../../../public/netflixbanner.jpg");
background-size: cover;
}
.bg-shade {
height: 100vh;
background-color: rgba(0,0,0,0.6);
}

NETFLIX-INDEX.JSX:
 import './netflix-index.css';
import { NextflixHeader } from
'../netflix-header/netflix-header';
import { NetflixMain } from
'../netflix-main/netflix-main';

export function NetflixIndex()

{
return(
<div className="bg-image">
<div className="bg-shade">
<NextflixHeader />
<NetflixMain />
</div>
</div>
)
}

NETFLIX MAIN

NETFLIX MAIN.CSS

main {
 display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
color:white;
}
.main-title {
font-size: 40px;
font-weight: bold;
font-family: Arial;
}
.main-subtitle {
font-size: 30px;
font-family: Arial;
}

NETFLIX.INDEX.JSX

import { NetflixRegister } from

'../neflix-register/netflix-register';
import './netflix-main.css';

export function NetflixMain()

{
 return(
<main>
<div className="main-title">The biggest
Indian hits. Ready to watch here from ₹
149.</div>
<div className="main-subtitle">Join
today. Cancel anytime.</div>
<NetflixRegister />
</main>
)
}

8-11-2023

Data Binding in React

- Data Binding is the process of accessing data

from source and render in UI, identifying the
changes in UI and updating back into data source.

- Data Binding is classified into 2 types

a) One Way Binding

b) Two Way Binding
- Trygve introduced the concept of data binding in
applications, which are separated into 3
components called
a) Model
b) View
c) Controller

- Model represents data.

- View represents UI.
- Controller represents application logic.
- Controller handles communication between
model and view.
- One Way Binding allows application to access
data implicitly and binding UI, but will not allow
to update the changes back to model.
- React supports only "one way binding".
* It is secured
* It uses less memory
* It is faster in rendering
* It improves the performance of application
* However it is not good for updating the
data source.
* It requires explicit actions.
- React can handle one way data binding without
using DOM manipulations or DOM methods.
- React uses a binding expression "{ }" to bind
dynamic data to UI.
 JavaScript Data Binding expression "${ }"

- React uses JavaScript data types

a) Primitive
number, string, boolean, null, undefined,
symbol, bigint
b) Non Primitives
array, object, map
c) Date type
d) Regular Expression Type

Syntax:
var userName = "John";

<p> Hello ! {userName} </p>

Ex: Primitive Types

data-binding.jsx

export function DataBinding()

{
var userName = "John";
var age = 22;
var subscribe = true;
return(
 <>
<h2>Data Binding</h2>
<p>Hello ! {userName} you will be
{age+1} next year. </p>
<p> {(subscribe===true)?"Thank you for
subscribing":"Please subscribe to our channel"}
</p>
</>
)
}

Ex: Array
- React uses Array methods to read elements from
array and present in UI.
- Array methods used for reading all elements
a) forEach()
b) map()
c) toString()
d) join()

data-binding.jsx

export function DataBinding()

{
var categories = ["All", "Electronics",
"Footwear", "Fashion"];
 return(
<>
<nav className="bg-dark text-white p-2
d-flex justify-content-between">
{
categories.map(category=>
<span key={category}
className="me-4">{category}</span>
)
}
</nav>
<div className="btn-group-vertical">
{
categories.map(category=>
<button key={category}
className="btn btn-danger mb-1
mt-1">{category}</button>
)
}
</div>
<ol>
{
categories.map((category)=>
<li key={category}>{category}</li>
)
}
 </ol>
<select>
{
categories.map(category=> <option
key={category}>{category}</option> )
}
</select>
<ul className="list-unstyled">
{
categories.map(category =>
<li key={category}>
<input type="checkbox"/>
<label>{category}</label>
</li>
)
}
</ul>
<table className="table table-hover
w-25">
<thead>
<tr>
<th>Categories</th>
</tr>
</thead>
<tbody>
{
categories.map(category =>
 <tr key={category}>
<td className="d-flex
justify-content-between"><span>{category}</span
> <button className="btn btn-danger bi
bi-trash"></button> </td>
</tr>
)
}
</tbody>
</table>
</>
)
}

Ex: Object, Array of Objects, Date, Regular

Expression