22BCE5111

Component Creation:

Create a functional component called Header that renders a header for a webpage.

import React from 'react';

function Header() {

return (

<header>

{/* Content of the header will go here */}

</header>

);

export default Header;

Create a class component called Counter that displays a count and increments it when a button is
clicked.

import React from 'react';

class Counter extends React.Component {

constructor(props) {
super(props);
this.state = {
count: 0,
};
}

handleIncrement = () => {
this.setState((prevState) => ({
count: prevState.count + 1,
}));
};

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleIncrement}>Increment</button>
</div>
);
}
}

export default Counter;

State Management:

Convert the Counter component from exercise 1 into a class component and manage the count using
state.

Add a button to reset the count to zero in the Counter component.

import React from 'react';

class Counter extends React.Component {

constructor(props) {
super(props);
this.state = {
count: 0,
};
}

handleIncrement = () => {
this.setState((prevState) => ({
count: prevState.count + 1,
}));
};

handleReset = () => {
this.setState({
count: 0,
});
};

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleIncrement}>Increment</button>
<button onClick={this.handleReset}>Reset</button>
</div>
);
}
}

export default Counter;

Props:

Create a functional component called Greeting that takes a prop name and displays a personalized
greeting.

Use the Greeting component in another component and pass a name prop to it.

// App.js

import React from 'react';

import Greeting from './Greeting'; // Import the Greeting component

const App = () => {

const userName = 'Alice'; // Replace with the desired name

return (
<div>
<Greeting name={userName} /> {/* Use the Greeting component */}
</div>
);
};

export default App;

Event Handling:
Create a functional component called Button that renders a button.

Add an event handler to the button that displays an alert when clicked.

Conditional

import React from 'react';

function Button() {

const handleClick = () => {

alert('Button clicked!');

};

return (

<button onClick={handleClick}>Click Me!</button>

);

export default Button;

Rendering:

Create a functional component called ConditionalDisplay that renders different content based on a
boolean prop isVisible.

If isVisible is true, display a message saying "Component is visible". Otherwise, display "Component is
hidden".

import React from 'react';

const ConditionalDisplay = ({ isVisible }) => {

return (
<div>

{isVisible ? (

<p>Component is visible</p>

):(

<p>Component is hidden</p>

)}

</div>

);

};

export default ConditionalDisplay;

Forms:

Create a class component called LoginForm that contains input fields for username and password.

Add state to the LoginForm component to manage the input values.

Add a submit button to the form that logs the entered username and password to the console.

import React from 'react';

class LoginForm extends React.Component {

constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}

handleInputChange = (event) => {

const { name, value } = event.target;
this.setState({ [name]: value });
};

handleSubmit = (event) => {

event.preventDefault();
const { username, password } = this.state;
console.log('Entered username:', username);
console.log('Entered password:', password);
// You can perform additional actions here (e.g., API calls, validation).
};
render() {
const { username, password } = this.state;

return (
<form onSubmit={this.handleSubmit}>
<div>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
name="username"
value={username}
onChange={this.handleInputChange}
/>
</div>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
name="password"
value={password}
onChange={this.handleInputChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}

export default LoginForm;

Fetching Data:

Create a class component called QuoteGenerator that fetches a random quote from an API when
mounted.

Display the fetched quote in the component.

import React from 'react';

import axios from 'axios';

class QuoteGenerator extends React.Component {

constructor(props) {
super(props);
this.state = {
quote: '',
};
}

componentDidMount() {
this.fetchRandomQuote();
}

fetchRandomQuote = () => {
axios
.get('https://api.adviceslip.com/advice')
.then((response) => {
const { advice } = response.data.slip;
this.setState({ quote: advice });
})
.catch((error) => {
console.log('Error fetching quote:', error);
});
};

render() {
const { quote } = this.state;

return (
<div className="quote-container">
<h1>Random Quote Generator</h1>
<p>{quote}</p>
<button onClick={this.fetchRandomQuote}>Get New Quote</button>
</div>
);
}
}
export default QuoteGenerator;

Component Composition:

Create a parent component called App that contains child components Header, Counter, and Greeting.

Render all three child components within the App component.

import React from 'react';

// Child component: Header

const Header = () => {

return <h1>My Awesome App</h1>;

};

// Child component: Counter

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0,

};

handleIncrement = () => {

this.setState((prevState) => ({
count: prevState.count + 1,

}));

};

render() {

return (

<div>

<p>Count: {this.state.count}</p>

<button onClick={this.handleIncrement}>Increment</button>

</div>

);

// Child component: Greeting

const Greeting = () => {

return <p>Hello, React World!</p>;

};

// Parent component: App

class App extends React.Component {

render() {

return (
<div>

<Header />

<Counter />

<Greeting />

</div>

);

export default App;