React Forms

===============
Forms are an integral part of any modern web application.

It allows the users to interact with the application as well as gather information
from the users.

Forms can perform many tasks that depend on the nature of your business
requirements and logic such as authentication of the user, adding user, searching,
filtering, booking, ordering, etc.

React offers a stateful, reactive approach to build a form.

The component rather than the DOM usually handles the React form.

In React, the form is usually implemented by using controlled components.

Project structure
------------------
myapp17
|
|----node_modules
|
|----public
|
|---favicon.ico
|---index.html
|---manifest.json

|------src
|
|---index.js
|
|---App.js

|
|-------package.json
|
|-------README.md

step1:
------
create a react project i.e myapp17.
ex:
Reactprojects> npx create-react-app myapp17

step2:
-------
Open the VSC code Editor.
ex:
Reactprojects> code .

step3:
-----
Switch/Move to myapp17 project.
 ex:
Reactprojects> cd myapp17

step4:
------
Install web-vitals and bootstrap package.
ex:
Reactprojects/myapp17> npm install web-vitals
Reactprojects/myapp17> npm install bootstrap

step5:
------
Run the react application.
ex:
Reactprojects/myapp17> npm start

step6:
-------
Import Bootstrap package inside "index.js" file.

index.js
---------
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '../node_modules/bootstrap/dist/css/bootstrap.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

step7:
------
Create App.js file inside "src" folder.

App.js
-----
import { useState } from "react";
function App()
{
const [userRegistration, setUserRegistration]=useState({
username:"",
password:"",
date:"",
category:""
})

const handleChange=(e)=>
 {
const name=e.target.name;
const value=e.target.value;
setUserRegistration({... userRegistration,[name]:value});
}

const handleSubmit=(e)=>
{
e.preventDefault();
setUserRegistration({username:"",password:"",date:"",category:""});
}

return (
<div className="container mt-5">
<div className="w-50 mx-auto bg-primary p-5 rounded">
<form onSubmit={handleSubmit}>

<label className="my-3">UserName:</label>
<input type="text" name="username" id="username" className="form-
control"
value={userRegistration.username}
onChange={handleChange}/>

<label className="my-3">Password:</label>
<input type="password" name="password" id="password" className="form-
control"
value={userRegistration.password}
onChange={handleChange}/>

<label className="my-3">Date:</label>
<input type="date" name="date" id="date" className="form-control"
value={userRegistration.date}
onChange={handleChange}/>

<label className="my-3">Category:</label>
<select name="category" id="category" className="form-select"
value={userRegistration.category}
onChange={handleChange}>
<option value="">none</option>
<option value="entertainment">Entertainment</option>
<option value="horror">Horror</option>
<option value="action">Action</option>
</select>

<button className="btn btn-light mt-4 w-100"> submit </button>

</form>

</div>
</div>
)
}
export default App;

step8:
------
Test the application by using below request url.
ex:
http://localhost:3000

Lists in ReactJs
=================
Lists are used to display data in an ordered format and mainly used to
display menus on websites. In React, Lists can be created in a similar way as we
create lists in JavaScript. Let us see how we transform Lists in regular
JavaScript.

The map() function is used for traversing the lists.

ex:

Project structure
-----------------
myapp18
|
|----node_modules
|
|-----public
| |
|---favicon.ico
|---index.html
|---manifest.json
|
|-----src
|
|---index.js
|---App.js
|
|-----package.json
|-----README.md

step1:
-----
create a react project i.e myapp18.
ex:
Reactprojects> npx create-react-app myapp18

step2:
------
Open the VSC code editor.
ex:
Reactprojects> code .

step3:
-----
Move/Switch to myapp18 project.
ex:
Reactprojects> cd myapp18

step4:
-----
 Instal web-vitals dependency.
ex:
npm install web-vitals

step5:
-----
Run the react application.
ex;
Reactprojects/myapp18> npm start

step6:
------
Create App.js file inside "src" folder.

App.js
-------
import React, { Component } from 'react'

export default class App extends Component {

render() {

var arr=[10,20,30,40];

var newArr=arr.map((element)=>
{
return <li>{element}</li>
})

return (
<ul>
{newArr}
</ul>
)
}
}

step6:
-----
Test the application by using below request url.
ex:
http://localhost:3000

ex:2
-----
App.js
------
import React, { Component } from 'react'

export default class App extends Component {

state={
users:[
{pid:101,pname:"LG",pprice:10000},
{pid:102,pname:"LAVA",pprice:20000},
{pid:103,pname:"MI",pprice:30000},
{pid:104,pname:"SAMSUNG",pprice:40000}
 ]
}

render() {

var newArr=this.state.users.map(user=>
{
return <h1>Id: {user.pid} Name: {user.pname} Price: {user.pprice}</h1>
})

return (
<div>
{newArr}
</div>
)
}
}

ex:3
-----
App.js
-------
import React, { Component } from 'react'

export default class App extends Component {

state={
users:[
{pid:101,pname:"LG",pprice:10000},
{pid:102,pname:"LAVA",pprice:20000},
{pid:103,pname:"MI",pprice:30000},
{pid:104,pname:"SAMSUNG",pprice:40000}
]
}

render() {

var newArr=this.state.users.map(user=>
{
return <tr><td>{user.pid}</td> <td> {user.pname}</td>
<td>{user.pprice}</td></tr>
})

return (
<div>
<table border={1} width="100%">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
{newArr}
</tbody>
</table>
</div>
)
 }
}

Key in ReactJS
==================
A key is a special string attribute you need to include when creating
lists of elements.

Keys help react identify which items have changed are added or are removed.

ex:

App.js
-----
import React, { Component } from 'react'

export default class App extends Component {

state={
users:[
{pid:101,pname:"LG",pprice:10000},
{pid:102,pname:"LAVA",pprice:20000},
{pid:103,pname:"MI",pprice:30000},
{pid:104,pname:"SAMSUNG",pprice:40000}
]
}

render() {

var newArr=this.state.users.map(user=>
{
return <tr key={user.pid}><td>{user.pid}</td> <td> {user.pname}</td>
<td>{user.pprice}</td></tr>
})

return (

<table border={1} width="100%">

<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
{newArr}
</tbody>
</table>

)
}
}