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.

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 from 'react';export function App(props) { return ( <div className='App'> <h1>Hello React.</h1> <h2>Start editing to see some magic happen!</h2> </div> );}// Log to consoleconsole.log('Hello console')

function NotificationMsg({ text, state }) {    return (      <div>        {{          info: <Message text={text} />,          warning: <Message text={text} />,        }[state]}      </div>    );  }

function NotificationMsg({ text, state }) {    return (      <div>        {{          info: <Message text={text} />,          warning: <Message text={text} />,        }[state]}      </div>    );

Kết quả xuất ra của các câu lệnh dưới đây là gì? let login = false; let outputHolder = ""; let userOkay = login ? outputHolder = "logout" : outputHolder = "login"; console.log(userOkay);