// Import React (v17+ doesn't require this for JSX)
import React from 'react';

// Render a component
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render();

const element = 
Hello, world!
;
const name = "Alice";
const greet = 
Hello, {name}!
;
const list = 
{[1,2,3].map(n => 
{n}
)}
;

function Welcome(props) {
  return 
Hello, {props.name}!
;
}

const App = () => ;

function Button({ label, onClick }) {
  return {label};
}

 alert('Clicked!')} />

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
     setCount(count + 1)}>
      Count: {count}
    
  );
}

function MyButton() {
  function handleClick() {
    alert('Button clicked!');
  }
  return Click me;
}

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return  setCount(count + 1)}>{count};
}

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('Tick');
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return 
Timer running...
;
}

import { useState } from 'react';

function MyForm() {
  const [value, setValue] = useState('');
  function handleChange(e) {
    setValue(e.target.value);
  }
  function handleSubmit(e) {
    e.preventDefault();
    alert(value);
  }
  return (
    

      
      Submit
    
  );
}

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? 
Welcome!
 : 
Please sign in
;
}

const numbers = [1, 2, 3];
const listItems = numbers.map(n => 
{n}
);

{listItems}

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return Themed;
}

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef();
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      
      Focus
    
  );
}

import { useMemo } from 'react';

function Expensive({ n }) {
  const fib = useMemo(() => fibonacci(n), [n]);
  return 
{fib}
;
}

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    
      
      
        } />
        } />
      
    
  );
}

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    // Log error
  }
  render() {
    if (this.state.hasError) {
      return 
Something went wrong.
;
    }
    return this.props.children;
  }
}

import { memo, useCallback } from 'react';

const MyComponent = memo(function MyComponent({ onClick }) {
  // ...
});

const handleClick = useCallback(() => {
  // ...
}, []);

// Using React Testing Library
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render();
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Use keys in lists
{items.map(item => 
{item.name}
)}

// Keep components small and focused
// Use hooks for stateful logic
// Avoid unnecessary re-renders
// Use PropTypes or TypeScript for type safety