const ThemeContext = React.createContext('light');

const App = () => (
  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>
);

const Toolbar = () => (
  <ThemeContext.Consumer>
    {theme => <div>Current theme: {theme}</div>}
  </ThemeContext.Consumer>
);

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

const App = () => {
  const [count, setCount] = React.useState(0);
  const memoizedValue = React.useMemo(() => count * 2, [count]);

  return (
    <div>
      <ExpensiveComponent value={memoizedValue} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

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>
);