Instructions for Setting Up and Running the React App:1.Create the LoginForm ComponentInside the src/components folder, create a new file named `LoginForm.jsx`At the top of your file, import React and the useState hook. This allows you to manage state in your functional component.Inside your component function, use the useState hook to set up initial state for the email and password.Also include data-testid for both email and password as "useremail-input" and "userpassword-input"Write a function (`handleChangeEvent`) to handle changes in the input fields (email and password) and update the state accordingly.Create a function (`handleSubmit`) to handle form submission. For now, log the form data to the console.Write the JSX markup for your form. Include labels, input fields for email and password, and a submit button.2.Navigate to the React App FolderOpen your terminal and change your working directory to the React app folder named `reactapp`3.Install DependenciesRun the following command to install the necessary dependencies: `npm install`4.Start the Development ServerAfter the installation is complete, start the React development server with the following command:`npm start`View the Output by clicking on above link `port: 8081`Note :The project will not be submitted if "Submit Project" is not done atleast once

import React, { Component } from 'react';    // Message Component   function Message(props)   {       if (props.isLoggedIn)           return <h1>Welcome Back!!!</h1>;       else          return <h1>Please Login First!!!</h1>;   }   // Login Component   function Login(props)   {      return(              <button onClick = {props.clickInfo}> Login </button>          );   }    // Logout Component   function Logout(props)   {       return(              <button onClick = {props.clickInfo}> Logout </button>          );   }   class App extends Component{       constructor(props)       {           super(props);            this.handleLogin = this.handleLogin.bind(this);            this.handleLogout = this.handleLogout.bind(this);         this.state = {isLoggedIn : false};       }      handleLogin()       {           this.setState({isLoggedIn : true});       }       handleLogout()       {           this.setState({isLoggedIn : false});       }       render(){           return(               <div>           <h1> Conditional Rendering Example </h1>                  <Message isLoggedIn = {this.state.isLoggedIn}/>                               {                       (this.state.isLoggedIn)?(                       <Logout clickInfo = {this.handleLogout} />                       ) : (                       <Login clickInfo = {this.handleLogin} />                       )                   }               </div>                     );       }   }   export default App;    Output:When you execute the above code, you will get the following screen.

In react state can be accessed using ....................Athis.stateBthis.state()Cstate.current()DNone of the above

How does React handle forms and form inputs?(2 Points)React provides its own <form> and <input> components for handling formsReact doesn't support forms or form inputsReact relies on native HTML form elements for handling formsReact uses controlled components where form data is managed by React state

how to prepare for reactjs inteview?

const handleSubmit = (e) => { e.preventDefault(); const userData = { username, email, password }; fetch('http://localhost:8080/signup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userData), }) .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); };