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
