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

const App = () => (
  <BrowserRouter>
    <Link to="/about">About</Link>
    <Route path="/about" component={About} />
  </BrowserRouter>
);

const About = () => <div>About Page</div>;

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

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

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
};

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

const App = () => (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

const App = () => {
  const inputRef = React.useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
};

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

const App = () => (
  <React.Profiler id="App" onRender={(id, phase, actualTime) => {
    console.log({ id, phase, actualTime });
  }}>
    <MyComponent />
  </React.Profiler>
);

const App = () => (
  <React.StrictMode>
    <MyComponent />
  </React.StrictMode>
);

const App = () => (
  <React.unstable_ConcurrentMode>
    <MyComponent />
  </React.unstable_ConcurrentMode>
);

// ServerComponent.server.js
export default function ServerComponent() {
  return <div>Server Component</div>;
}

// ClientComponent.client.js
import ServerComponent from './ServerComponent.server';

export default function ClientComponent() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}