22 06 2024
22 06 2024
"scripts": {
"shorthand" : "your commands … "
}
import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
import '../node_modules/bootstrap/dist/css/bootstrap.css';
import bootstrap from 'bootstrap';
Ex:
login.jsx
import "./login.css";
Syntax:
var title = "User Login";
Note: Never use variables to store and handle data for a component.
Variables are immutable types, and a component requires mutable memory.
State in React
- Web applications use "http" as protocol.
- "Http" is a state less protocol.
- It can't remember information between requests.
- It requires various state management techniques.
- State management is classified into
a) Client Side State
b) Server Side State
- Client Side state management includes
a) Query String
b) Local Storage
c) Session Storage
d) Cookies
- React can use all client side state management techniques.
- React also provides a local state for components, so that they can manage data in
virtual DOM.
- React provides "useState()" hook [function] to maintain a local state for
component.
- React have various state related hooks
useState()
useContext()
useReducer()
useMemo()
useCallBack()
etc...
Syntax:
import {useState} from 'react';
Ex:
import "./login.css";
import { useState } from "react";
return(
<div className="container">
<form className="form-login alert alert-warning alert-dismissible">
<h3 className="bi bi-person-fill">{title}</h3>
<button data-bs-dismiss="alert" className="btn btn-close"></button>
<dl>
<dt>User Name</dt>
<dd><input type="text" value={userName} className="form-
control" /></dd>
<dt>Password</dt>
<dd><input type="password" className="form-control"/></dd>
</dl>
<button className="btn btn-warning w-100">Login</button>
</form>
</div>
)
}