Scribd
Upload
17 views4 pages

22 06 2024

This document provides a guide for creating a React application using NPX and Web Pack Bundler, including setup instructions for Bootstrap and data binding techniques. It explains the concept of batch programs and state management in React, detailing client-side state management options and the use of hooks like useState. Additionally, it includes example code for a login component demonstrating these concepts.

Uploaded by

Payal Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views4 pages

22 06 2024

This document provides a guide for creating a React application using NPX and Web Pack Bundler, including setup instructions for Bootstrap and data binding techniques. It explains the concept of batch programs and state management in React, detailing client-side state management options and the use of hooks like useState. Additionally, it includes example code for a login component demonstrating these concepts.

Uploaded by

Payal Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Creating React Application using NPX [Web Pack Bundler]

> npx create-react-app app-name


> npm start

FAQ: What is "npm start" ?


Ans: It is a batch program to compile and run react application.

FAQ: What is a batch program?


Ans: A batch program comprises of series of commands defined under specified name.
So that you can execute the commands in sequential order by running the
command name.

FAQ: Where to add batch command?


Ans : In package.json => "scripts"

"scripts": {
"shorthand" : "your commands … "
}

Setup Bootstrap for React application:


1. Install bootstrap and icons using npm package manager

> npm install bootstrap bootstrap-icons --save

2. Go to "index.js" and import the following

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";

export function Login(){


return(
<div className="container">
<form className="form-login alert alert-warning alert-dismissible">
<h3 className="bi bi-person-fill">User Login</h3>
<button data-bs-dismiss="alert" className="btn btn-close"></button>
<dl>
<dt>User Name</dt>
<dd><input type="text" 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>
)
}

React Data Binding

- Databinding is a technique of web application.


- Data binding allows to access data from memory source and bind to UI elements.
- It also allows to identify the change in data from UI and update back into memory
source.
- JavaScript requires lot of DOM methods and Events to handle data binding.
- React library can manage one-way-binding by using a binding expression defined in
embedded block "{ }".

Syntax:
var title = "User Login";

<h3> { title } </h3>

var uname = "David";

<input type="text" value={uname} />

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';

const [getter, setter] = useState(anyValue);

<p> {getter} </p>

Ex:
import "./login.css";
import { useState } from "react";

export function Login(){


const [title, setTitle] = useState('User Login');
const [userName, setUserName] = useState('John');

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>
)
}

You might also like