1. Create a functional component that displays “Hello, World!” on the screen
import React from 'react';
const HelloWorld = () => {
return Hello, World!
;
};
export default HelloWorld;
2. Create a counter component that increments and decrements the count on button clicks
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
Count: {count}
);
};
export default Counter;
3. Create a component that shows “Logged In” if a user is logged in and “Logged Out” if not
import React, { useState } from 'react';
const LoginStatus = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
{isLoggedIn ? Logged In
: Logged Out
}
);
};
export default LoginStatus;
4. Create a form with a text input and a submit button. Display the input value below the form when submitted
import React, { useState } from 'react';
const FormComponent = () => {
const [inputValue, setInputValue] = useState('');
const [submittedValue, setSubmittedValue] =
useState('');
const handleSubmit = (event) => {
event.preventDefault();
setSubmittedValue(inputValue);
};
return (
{submittedValue && Submitted Value:
{submittedValue}
}
);
};
export default FormComponent;
5. Create a component that fetches data from a public API and displays it.
import React, { useEffect, useState } from 'react';
const FetchDataComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error
('Error fetching data:', error));
}, []);
return (
Posts
{data.map((post) => (
- {post.title}
))}
);
};
export default FetchDataComponent;
6. Create a context and a provider to manage a global state
import React, { createContext, useContext, useState }
from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
return (
{children}
);
};
const ThemedComponent = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
Current Theme: {theme}
);
};
export { ThemeProvider, ThemedComponent };
7. Set up a simple routing mechanism in a React application.
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link }
from 'react-router-dom';
const Home = () => Home
;
const About = () => About
;
const App = () => {
return (
);
};
export default App;
8. Write a component that accepts a name
prop and displays a greeting
const Greeting = ({ name }) => {
return Hello, {name}!
;
};
9. Create a class component that logs a message to the console when it mounts and unmounts.
import React, { Component } from 'react';
class LifecycleDemo extends Component {
componentDidMount() {
console.log('Component mounted');
}
componentWillUnmount() {
console.log('Component unmounted');
}
render() {
return Check the console;
}
}
export default LifecycleDemo;
10. Create a simple context for managing a theme (light/dark) and a component that consumes the context.
import React, { createContext, useState, useContext }
from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) =>
(prevTheme === 'light' ? 'dark' : 'light'));
};
return (
{children}
);
};
const ThemedComponent = () => {
const { theme, toggleTheme } =
useContext(ThemeContext);
return (
Current theme: {theme}
);
};
const App = () => (
);
export default App;
11. Create a custom hook that logs the current window size and updates it on resize
import { useState, useEffect } from 'react';
const useWindowSize = () => {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener
('resize', handleResize);
}, []);
return size;
};
const WindowSizeComponent = () => {
const { width, height } = useWindowSize();
return (
Width: {width}
Height: {height}
);
};
export default WindowSizeComponent;
12. Create a parent component that re-renders frequently and a child component that only re-renders when its props change.
import React, { useState } from 'react';
const ChildComponent = React.memo(({ count }) => {
console.log('ChildComponent rendered');
return Child count: {count}
;
});
const ParentComponent = () => {
const [parentCount, setParentCount] = useState(0);
const [childCount, setChildCount] = useState(0);
return (
Parent count: {parentCount}
);
};
export default ParentComponent;
13. Implement code splitting for a component using React.lazy
and Suspense
.
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import
('./LazyComponent'));
const App = () => (
Loading... }>