1. Develop a React.

js application featuring a login form where users can input their

username and password. Upon clicking the login button, the application should
display a 'Welcome' message

import React, { useState } from 'react';

function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

function handleUsernameChange(e) {
setUsername(e.target.value);
}

function handlePasswordChange(e) {
setPassword(e.target.value);
}

function handleLogin() {
alert("Welcome");
}

return (
<div>
<input type="text" value={username} onChange={handleUsernameChange} />
<input type="password" value={password} onChange={handlePasswordChange} />
<button onClick={handleLogin}>Login</button>
</div>
);
}

export default App;

importing the useState hook from the React library. The useState hook allows
functional components in React to manage local state.

useState is a hook provided by React, introduced in React version 16.8. It allows

functional components to manage state without needing to use class components.

Prior to the introduction of hooks, state management was primarily done in class components
using the this.state object. However, with the introduction of hooks, functional
components can now manage their own state using the useState hook.
The line const [username, setUsername] = useState(''); in React is using
array destructuring to assign names to the elements returned by the useState hook.

useState(''): This is a call to the useState hook, which is a function provided by

React to manage state in functional components. The useState hook accepts an initial state
value as its argument, which in this case is an empty string ''.

const [username, setUsername]: This line uses array destructuring to extract two
elements from the array returned by the useState hook. The first element (username)
represents the current state value, and the second element (setUsername) is a function that
allows you to update the state.
So, after this line executes:
 username will hold the current value of the username state.

 setUsername will be a function that you can use to update the value of
username.

setUsername(e.target.value):

This line calls the setUsername function, which is a setter function returned by the
useState hook.

It updates the username state with the value of the input field. e.target.value
retrieves the value of the input field where the change event occurred. So, whenever the
username input field changes, this function updates the username state with the new value.

Output:

1. Write a React JS code to demonstrate how to locally manage a component’s state

import React, { useState } from "react";

function App() {
const [value, setValue] = useState(0);

function incrementValue() {
setValue((prevValue) => prevValue + 1);
}

function decrementValue() {
setValue((prevValue) => prevValue - 1);
}

return (
<div className="App">
<h3>Local State in ReactJS</h3>
<h5>The value managed locally is: {value}</h5>
<div>
<button onClick={incrementValue}>Increment!</button>
<button onClick={decrementValue}>Decrement!</button>
</div>
</header>
</div>
);
}

export default App;

2. Demonstrate Inline Styling (color, backgroundColor, margin, font-

weight,marginBottom) with JSX in React JS. Also display image, add links to the
same page

import roseimage from './assets/rose.jpeg'

export default function App() {
return (
<section
style={{
backgroundColor: "yellow"
}}
>
<div
style={{
margin: "0 auto",
border: "1px solid black",
padding: "40px 25px",
marginTop: "50px"
}}>
<h1
style={{
color:"red"
}}
> Rose </h1>
<img
src={roseimage}
alt="Tammy Stevens"
style={{
}}
/>
<div>
<p
style={{
lineHeight: 1.5,
fontWeight: 300,
marginBottom: "25px",
}}
>
A rose is either a woody perennial flowering plant of the genus Rosa in the family
Rosaceae or the flower it bears. There are over three hundred species and tens of thousands of
cultivars.[citation needed] They form a group of plants that can be erect shrubs, climbing, or
trailing, with stems that are often armed with sharp prickles. Their flowers vary in size and
shape and are usually large and showy, in colours ranging from white through yellows and
reds. Most species are native to Asia, with smaller numbers native to Europe, North America,
and northwestern Africa.[2] Species, cultivars and hybrids are all widely grown for their
beauty and often are fragrant. Roses have acquired cultural significance in many societies.
Rose plants range in size from compact, miniature roses, to climbers that can reach seven
meters in height.Different species hybridize easily, and this has been used in the development
of the wide range of garden roses.
Rosa hemisphaerica watercolor by Pierre-Joseph Redouté .
</p>
</div>
<p
style={{
marginBottom: "0",
fontWeight: 600,
fontSize: "1rem"
}}
>
<a href="https://en.wikipedia.org/wiki/Rose" style={{ fontWeight: 400 }}> To know
more</a>
</p>
</div>
</section>
);
}