Expriment no:-5
(i) Install and Configure React Environment
Code:
1. Install Node.js and npm from https://nodejs.org
2. Create a React app:
npx create-react-app my-app cd my-app
npm start
Output:
Creating a new React app in /path/to/my-app. Installing packages. This might
take a few minutes. Success! Created my-app at /path/to/my-app
Inside that directory, you can run several commands: npm start
Compiled successfully!
You can now view my-app in the browser. Local:
http://localhost:3000 On Your
Network: http://192.168.x.x:3000
(ii) Create a React Component with JSX
Code:
function Welcome() { return (
<div>
<h1>Hello, React!</h1>
<p>This is a JSX Component.</p>
</div>
);
}
Output (Rendered in browser):
Hello, React!
This is a JSX Component.
(Displayed as a heading and paragraph on the page)
(iii) Implement Props and State in a React App
Code (Props):
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
// Usage:
// <Greeting name="Alice" />
// <Greeting name="Bob" /> Output (Props):
Hello, Alice!
Hello, Bob!
Code (State - Counter):
function Counter() {
const [count, setCount] = useState(0); return (
<div>
<h3>Count: {count}</h3>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Output (State):
Initial render:
Count: 0
After clicking "Increment" once:
Count: 1
(iv) Build a Form in React with Validation
Code:
function LoginForm() {
const [email, setEmail] = useState(''); const [error,
setError] = useState('');
const handleSubmit = (e) => { e.preventDefault();
if (!email.includes('@')) { setError('Invalid email
address!');
} else { setError('');
alert('Form Submitted Successfully!');
}
};
return (
<form onSubmit={handleSubmit}>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<p>{error}</p>
<button type="submit">Submit</button>
</form>
);
}
Output:
Case 1 (Invalid email entered: "userexample.com"):
Invalid email address! (displayed on page)
Case 2 (Valid email entered: "[email protected]" and form submitted): Alert popup: "Form Submitted
Successfully!"
(no error shown on page)
(v) Create a React App Using Event Handling (onClick, onChange)
Code:
function EventExample() {
const [text, setText] = useState(''); const handleClick = ()
=> {
alert(`Button clicked! Text: ${text}`);
};
return (
<div>
<input onChange={(e) => setText(e.target.value)} />
<button onClick={handleClick}>Show Alert</button>
</div>
);
}
Output:
User types 'hello' into input, then clicks "Show Alert": Alert popup: "Button clicked!
Text: hello"
(vi) Implement React Router for Navigation
Code:
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router> Output:
On visiting '/':
Displays: "Welcome to Home Page"
On visiting '/about':
Displays: "About Us"
Clicking the links navigates between pages without full page reload.
(vii) Use Refs in React to Access DOM Elements
Code:
function InputFocus() {
const inputRef = useRef(null); const handleFocus
= () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
}
Output:
On clicking "Focus Input" button:
The text input receives focus (cursor appears in the input).
