Fieldingset

Fieldingset

fieldingset

|
1 install
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info
<?tbody> <?tr> <?td>101 <?td>Aryan <?td>HR <?td>30000 // make more table
); } export default App;
  • Write a react application to configure an event.
    import React from 'react'; function App() { function handleClick() { alert("Button clicked! Event configured successfully."); } return ( <?div>
    • React Event Handling {/* Event configuration */} Click Me
    ); } export default App; 6. Write a react application to demonstrate an event with an argument import React from 'react'; function App() { function showMessage(name) { alert("Hello " + name + "! Event with argument executed."); } return ( React Event with Argument {/* Passing argument using arrow function */} showMessage("Ayush")}> Click Me ); } –--- next line ---- >export default App; 7. Write a react code to implement react ‘props’. *App.js* import React from 'react'; import Student from './Student'; function App() { return ( React Props Example {/* Passing props to child component */}
    ); } export default App; *Student.js* import React from 'react'; function Student(props) { return ( Name: {props.name}

    Course: {props.course}

    Age: {props.age}

    ); } --- next line --- > export default Student; 8. Write a react code to design an information page for a HR agency for advertising Jobs using ‘props’ . *App.js* import React from 'react'; import Job from './Job'; function App() { return ( ABC HR Agency Connecting talent with opportunity

    {/* Job advertisements using props */}
    ); } export default App; *Job.js* import React from 'react'; function Job(props) { return ( {props.title} Location: {props.location}

    Experience: {props.experience}

    Salary: {props.salary}

    ); } export default Job; 9. Design a react application to implement an input form. import React, { useState } from 'react'; function App() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [course, setCourse] = useState(''); function handleSubmit(event) { event.preventDefault(); alert( "Name: " + name + "\nEmail: " + email + "\nCourse: " + course ); } return ( Student Registration Form Name: setName(e.target.value)} />

    Email: setEmail(e.target.value)} />

    Course: setCourse(e.target.value)} />

    Submit
    ); } export default App; 10. Design a form with multiple input using React. import React, { useState } from 'react'; function App() { const [data, setData] = useState({ name: '', email: '', course: '', agree: false }); function handleChange(e) { const { name, value, type, checked } = e.target; setData({ ...data, [name]: type === "checkbox" ? checked : value }); } function handleSubmit(e) { e.preventDefault(); alert( `Name: ${data.name} Email: ${data.email} Course: ${data.course} Agreed: ${data.agree}` ); } return ( Registration Form Select Course BCA MCA Agree
    Submit ); } export default App; 11. Design a form with Drop Down and Radio buttons using React . import React, { useState } from 'react'; function App() { const [course, setCourse] = useState(''); const [gender, setGender] = useState(''); function handleSubmit(e) { e.preventDefault(); alert( "Course: " + course + "\nGender: " + gender ); } return ( Student Form {/* Drop Down */} Course: setCourse(e.target.value)}> Select BCA BSc IT MCA

    {/* Radio Buttons */} Gender: setGender(e.target.value)} /> Male setGender(e.target.value)} /> Female

    Submit
    ); } export default App; 30. Implement the concept of Hooks in a form.. a. useState b. useEffect c. useContext App.js import React, { useState, createContext } from 'react'; import Form from './Form'; export const UserContext = createContext(); function App() { const [user, setUser] = useState("Guest"); return (
    ); } export default App; Form.js import React, { useState, useEffect, useContext } from 'react'; import { UserContext } from './App'; function Form({ setUser }) { const [name, setName] = useState(""); const user = useContext(UserContext); useEffect(() => { console.log("Name changed"); }, [name]); return ( { e.preventDefault(); setUser(name); }}>

    User: {user}

    setName(e.target.value)} />
    ); } 31. Create a React SPA for a company engaged in providing housekeeping services to educational institutions using the concept of Router App.js import React from 'react'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import Home from './Home'; import Services from './Services'; import About from './About'; import Contact from './Contact'; function App() { return ( EduClean Housekeeping Services } /> } /> } /> } /> ); } export default App; Home.js function Home() { return Clean & Hygienic Campuses for Schools and Colleges; } export default Home; Services.js function Services() { return ( Classroom Cleaning Lab & Library Cleaning Washroom Sanitization Campus Waste Management ); } export default Services; About.js function About() { return We provide professional housekeeping services to educational institutions.

    ; } export default About; Contact.js function Contact() { return Email: educlean@gmail.com | Phone: 9876543210

    ; } export default Contact; Index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')).render();