Try Code

        function Button({ label, onClick }) {
          return <button onClick={onClick}>{label}</button>;
        }

        function App() {
            return (
                <div>
                    <Button label="Click Me" onClick={() => alert("Clicked!")} />
                    <Button label="Submit" onClick={() => console.log("Submitted!")} />
                </div>
            );
        }

Try Code

         function withLogging(WrappedComponent) {
              return function EnhancedComponent(props) {
                  console.log('Component is rendered:', WrappedComponent.name);
                  return <WrappedComponent {...props} />;
              };
          }

          const HelloWorld = () => <div>Hello World</div>;

          const HelloWorldWithLogging = withLogging(HelloWorld);

Try Code

        function DataFetcher({ render }) {
            const [data, setData] = React.useState(null);

            React.useEffect(() => {
                fetch('/api/data')
                    .then(response => response.json())
                    .then(data => setData(data));
            }, []);

            return render(data);
        }

        function App() {
            return (
                <DataFetcher render={data => (data ? <div>{data.value}</div> : <div>Loading...</div>)} />
            );
        }

Try Code

        // Container Component (handles logic)
        function UserProfileContainer() {
            const [user, setUser] = React.useState(null);

            React.useEffect(() => {
                fetch('/api/user')
                    .then(res => res.json())
                    .then(setUser);
            }, []);

            return <UserProfile user={user} />;
        }

        // Presentational Component (renders UI)
        function UserProfile({ user }) {
            return user ? 
                <div>Name: {user.name}</div> : 
                <div>Loading...</div>;
        }

Try Code

        function useWindowWidth() {
            const [width, setWidth] = React.useState(window.innerWidth);

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

            return width;
        }

        function App() {
            const width = useWindowWidth();
            return <div>Window width: {width}</div>;
        }

Try Code

        const UserContext = React.createContext();

        function App() {
            const [user, setUser] = React.useState({ name: 'John' });

            return (
                <UserContext.Provider value={user}>
                    <UserProfile />
                </UserContext.Provider>
            );
        }

        function UserProfile() {
            const user = React.useContext(UserContext);
            return <div>Welcome, {user.name}</div>;
        }

Try Code

        class ErrorBoundary extends React.Component {
          constructor(props) {
            super(props);
            this.state = { hasError: false };
          }

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

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

        function BuggyComponent() {
          throw new Error('Oops!');
        }

        function App() {
          return (
            <ErrorBoundary>
              <BuggyComponent />
            </ErrorBoundary>
          );
        }

Try Code

  import { useState, useEffect, useCallback } from 'react';

  const useFetch = (url, options = {}, retries = 3) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const fetchData = useCallback(async () => {
      setLoading(true);
      setError(null);
      let attempt = 0;

      while (attempt < retries) {
        try {
          const response = await fetch(url, options);
          if (!response.ok) {
            throw new Error('HTTP error! Status: ' + response.status);
          }
          const result = await response.json();
          setData(result);
          setLoading(false);
          return;
        } catch (err) {
          attempt += 1;
          if (attempt >= retries) {
            setError(err);
            setLoading(false);
          }
        }
      }
    }, [url, options, retries]);

    useEffect(() => {
      fetchData();
    }, [fetchData]);

    return { data, loading, error, refetch: fetchData };
  };

  const Posts = () => {
    const { data, loading, error, refetch } = useFetch('https://jsonplaceholder.typicode.com/posts');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
      <div>
        <button onClick={refetch}>Reload Posts</button>
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        
        </ul>
      </div>
    );
  };

  export default Posts;

Try Code

        export const Button = ({ label, onClick }) => 
        <button onClick={onClick}>
          {label}
        </button>;

Try Code

  import { Button } from './Button';

  export const SearchBar = ({ placeholder, onSearch }) => (
    <div>
      <input type='text' placeholder={placeholder} />
      <Button label='Search' onClick={onSearch} />
    </div>
  );

Try Code

        import { SearchBar } from './SearchBar';

        export const Header = () => (
          <header>
            <h1>Website Title</h1>
            <SearchBar placeholder='Search...' onSearch={() => alert('Searching...')} />
          </header>
        );

Try Code

  import { Header } from './Header';

  export const HomePageTemplate = ({ children }) => (
    <div>
      <Header />
      <main>{children}</main>
    </div>
  );

Try Code

  import { HomePageTemplate } from './HomePageTemplate';

  const HomePage = () => (
    HomePageTemplate
      <p>Welcome to the homepage!</p>
    HomePageTemplate
  );

  export default HomePage;

Try Code

        // Presenter Component: PostList.jsx
        const PostList = ({ posts, loading, error }) => {
          if (loading) return <div>Loading...</div>;
          if (error) return <div>Error: {error.message}</div>;

          return (
            <ul>
              {posts.map(post => (
                <li key={post.id}>{post.title}</li>
              ))}
            </ul>
          );
        };

        export default PostList;

        // Container Component: PostsContainer.jsx
        import React, { useState, useEffect } from 'react';
        import PostList from './PostList';

        const PostsContainer = () => {
          const [posts, setPosts] = useState([]);
          const [loading, setLoading] = useState(true);
          const [error, setError] = useState(null);

          useEffect(() => {
            fetch('https://jsonplaceholder.typicode.com/posts')
              .then(res => res.json())
              .then(data => {
                setPosts(data);
                setLoading(false);
              })
              .catch(err => {
                setError(err);
                setLoading(false);
              });
          }, []);

          return <PostList posts={posts} loading={loading} error={error} />;
        };

        export default PostsContainer;

Try Code

        import React, { useState, useEffect, createContext, useContext from 'react';

        // Create a Context for the Observer Pattern
        const DataContext = createContext();

        // Subject Component
        const DataProvider = ({ children }) => {
          const [data, setData] = useState([]);

          useEffect(() => {
            fetch('https://jsonplaceholder.typicode.com/posts')
              .then(res => res.json())
              .then(setData);
          }, []);

          return (
            DataContext.Provider value={ data }>
              {children}
            
          );
        };

        // Observer Component 1
        const PostList = () => {
          const data = useContext(DataContext);

          return (
            <ul>
              {data.map(post => (
                <li key={post.id}>{post.title}</li>
              ))}
            </ul>
          );
        };

        // Observer Component 2
        const PostCount = () => {
          const data = useContext(DataContext);

          return <div>Total Posts: {data.length}</div>;
        };

        // Main App Component
        const App = () => (
          <DataProvider>
            <h1>Posts</h1>
            <PostCount />
            <PostList />
          </DataProvider>
        );

        export default App;

Try Code

        import React from 'react';

        const ExpensiveComponent = React.memo((props) => {
          console.log('Rendered ExpensiveComponent');
          return <div>{props.value}</div>;
        });

        const ParentComponent = () => {
          const [count, setCount] = React.useState(0);

          return (
            <div>
              <ExpensiveComponent value='Static Content' />
              <button onClick={() => setCount(count + 1)}>Increment Count</button>
              <p>Count: {count}</p>
            </div>
          );
        };

        export default ParentComponent;

Try Code

        import { Suspense, lazy } from 'react';

        // Lazy load the component
        const HeavyComponent = lazy(() => import('./HeavyComponent'));

        const App = () => (
          <div>
            <h1>Welcome to the App</h1>
            <Suspense fallback="<div>Loading...</div>">
              HeavyComponent /
            </Suspense>
          </div>
        );

        export default App;

Try Code

  import React, { createContext, useContext, useState from 'react';

  const UserContext = createContext();

  const UserProvider = ({ children }) => {
    const [user, setUser] = useState({ name: 'Alice' });
    return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
  };

  const UserProfile = () => {
    const user = useContext(UserContext);
    return <div>User: {user.name}</div>;
  };

  const App = () => (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );

  export default App;