Posts

Showing posts from February, 2026

What is Hook in React?

 A Hook lets you use state inside a function component . Before Hooks, only class components could store state. Now we use useState . Simple Counter Example import React, { useState } from "react"; function Counter() {   const [number, setNumber] = useState(0);   return (     <div>       <h2>Counter: {number}</h2>       <button onClick={() => setNumber(number + 1)}>         Increase       </button>     </div>   ); } export default Counter; When button is clicked: setNumber(number + 1) runs React updates state Component re-renders automatically
Post a Comment
Read more

Experiment 12: ReactJS – Conditional Rendering, Rendering Lists, React Forms

Write a program for conditional rendering.   App.js import React, { useState } from "react"; function App() {   const [isLoggedIn, setIsLoggedIn] = useState(false);   return (     <div style={{ padding: "20px", fontFamily: "Arial" }}>       <h2>Conditional Rendering Example</h2>       {isLoggedIn ? (         <h3>Welcome back, User! 😊</h3>       ) : (         <h3>Please login to continue.</h3>       )}       <button onClick={() => setIsLoggedIn(!isLoggedIn)}>         {isLoggedIn ? "Logout" : "Login"}       </button>     </div>   ); } export default App; UI/UX based: import React, { useState } from "react"; function App() {   const [isLoggedIn, setIsLoggedIn] = useState(false);   return (     <div style={styles....
Post a Comment
Read more

11.C. Write a program for responding to events.

Introduction to Events Events in React.js are how user interactions—like clicks, typing, form submissions, and mouse movements—are handled in a React application. React uses a synthetic event system, which wraps native browser events to provide a consistent behavior across different browsers. Event names are written in camelCase (e.g., onClick , onChange ), and instead of passing a string, you pass a function as the event handler. This makes event handling more predictable and easier to manage within components. Handling events in React is tightly connected to component state and re-rendering. When an event occurs, you typically update the component’s state using hooks like useState , and React efficiently updates only the parts of the UI that need to change. This approach encourages clean separation between UI and logic, improves maintainability, and enables building interactive, responsive user interfaces with minimal direct manipulation of the DOM. Write a program for responding to ...
Post a Comment
Read more

Experiment 11: ReactJS – Props and States, Styles, Respond to Events

Write a program to work with props and states Files Used public/index.html src/index.js src/App.js index.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Props and State Example</title> </head> <body>   <div id="root"></div> </body> </html> index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); App.js import React from "react"; /* ---------- Function Component (Props) ---------- */ function User(props) {   return (     <div>       <h3>User Component</h3>       <p>Name : {props.name}</p>       <p>Age : {props.age}</p>     </div>   ); } /* ---------- Class Component (State + Props) ---------- */ class Counter exte...
Post a Comment
Read more