const MyComponent = () => { return 
Hello, World!
; };

const MyComponent = () => { return ( 
 
Welcome to React
 
 ); };

const Greeting = ({ name }) => { return 
Hello, {name}!
; }; // Usage 

const Greeting = ({ name = "Guest" }) => { return 
Hello, {name}!
; };

import { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); return ( 
 
Count: {count}
  setCount(count + 1)}>Increment 
 ); };

import { useEffect } from 'react'; const DataFetcher = () => { useEffect(() => { fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)); }, []); // Empty dependency array means it runs once return 
Data fetched. Check console.
; };

const LoginMessage = ({ isLoggedIn }) => { return ( 
 {isLoggedIn ? 
Welcome back!
 : 
Please log in.
} 
 ); };

const ItemList = ({ items }) => { return ( 
 {items.map(item => ( 
{item.name}
 ))} 
 ); };

const Button = () => { const handleClick = () => { alert('Button clicked!'); }; return Click Me; };

const Form = () => { const [value, setValue] = useState(''); const handleChange = (e) => { setValue(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); alert(`Submitted value: ${value}`); }; return ( 
  Submit 
 ); };

import { createContext, useContext } from 'react'; const MyContext = createContext(); const MyProvider = ({ children }) => { const value = 'Hello from context'; return (  {children}  ); }; const MyComponent = () => { const contextValue = useContext(MyContext); return 
{contextValue}
; };

import { useState, useEffect } from 'react'; const useFetch = (url) => { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(response => response.json()) .then(data => setData(data)); }, [url]); return data; }; // Usage const DataComponent = () => { const data = useFetch('/api/data'); return 
{data ? JSON.stringify(data) : 'Loading...'}
; };

import { useMemo } from 'react'; const ExpensiveComponent = ({ number }) => { const expensiveCalculation = useMemo(() => { // Assume this is a computationally expensive operation return number * 2; }, [number]); return 
{expensiveCalculation}
; };

import { useCallback } from 'react'; const Button = ({ onClick }) => { return Click me; }; const ParentComponent = () => { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); return ; };

import { useReducer } from 'react'; const reducer = (state, action) => { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } }; const Counter = () => { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( 
 
Count: {state.count}
  dispatch({ type: 'increment' })}>Increment  dispatch({ type: 'decrement' })}>Decrement 
 ); };

const MyComponent = () => { return ( <> 
Title
 
Description
  ); };

import { createPortal } from 'react-dom'; const Modal = ({ children }) => { return createPortal( 
 {children} 
, document.getElementById('modal-root') ); };

import { Component } from 'react'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.log(error, errorInfo); } render() { if (this.state.hasError) { return 
Something went wrong.
; } return this.props.children; } } // Usage   

import { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); const App = () => { return ( Loading...