React

• WebSocket or Socket io in react
• waypoints.min.js
• jquery.colorbox.js
• main.jsx
• html-react-parser
• Storybook
• Angular vs React
• Efficient State Management (Redux, Recoil, Context API, Zustand, etc.)
• react package
• import {useEffect} from "react";
• context hooks in react
• @types/react
• import React from 'react'
• createbrowserrouter in react
• useMemo,useLocation from react
• React Router DOM
• React Router DOM
• import { RouterProvider } from "react-router-dom"
• import {createBrowserRouter, Navigate} from "react-router-dom";
• navigate in react router dom
• import { useOutletContext } from "react-router-dom";
• Vite
• import { defineConfig } from 'vite'
• @vitejs/plugin-react
• vite package different components
• React DOM Package
• import ReactDOM from 'react-dom/client'
• package react-dom/client
• @types/react-dom
• react-dom
• Axios
• Axios in React
• import axios from "axios";
• Chakra UI

WebSocket or Socket io in react

 

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

function WebSocketComponent() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const newWs = new WebSocket('ws://localhost:8080'); // Replace with your WebSocket server URL

    newWs.onopen = () => {
      console.log('WebSocket connected');
    };

    newWs.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    newWs.onclose = () => {
      console.log('WebSocket disconnected');
    };

    newWs.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    setWs(newWs);

    return () => {
      newWs.close();
    };
  }, []);

  const sendMessage = () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.send(inputValue);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>WebSocket Chat</h1>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default WebSocketComponent;

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client'; // Install with: npm install socket.io-client

const socket = io('http://localhost:3001'); // Replace with your Socket.IO server URL

function SocketIOComponent() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    socket.on('connect', () => {
      console.log('Socket.IO connected');
    });

    socket.on('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    socket.on('disconnect', () => {
      console.log('Socket.IO disconnected');
    });

    return () => {
      socket.off('connect');
      socket.off('message');
      socket.off('disconnect');
    };
  }, []);

  const sendMessage = () => {
    socket.emit('message', inputValue); // 'message' is the event name
    setInputValue('');
  };

  return (
    <div>
      <h1>Socket.IO Chat</h1>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default SocketIOComponent;

waypoints.min.js

jquery.colorbox.js

    $(document).ready(function(){
        $(".example-link").colorbox({
            rel: 'gallery', // groups items for a slideshow
            transition: 'fade', // animation type
            width: '80%', // width of the lightbox
            height: '80%' // height of the lightbox
        });
    });

main.jsx

In React applications, main.jsx (or sometimes index.jsx) typically serves as the entry point of the application. It is the file where the main React component, often named App, is imported and then rendered into the root element of the HTML document.

Here's a breakdown of its typical function:

• Importing React and ReactDOM: It imports the necessary libraries for building and rendering React components.

• Importing the main component: It imports the top-level component of the application, usually App.jsx, which encapsulates the entire user interface.

• Locating the root HTML element: It identifies the HTML element (typically a div with the ID root) within index.html where the React application will be mounted.

• Rendering the application: It uses ReactDOM.createRoot() and render() to inject the main React component into the specified root HTML element, effectively making the React application visible in the browser.

Essentially, main.jsx acts as the bridge between your React components and the actual web page, initiating the rendering process and bringing your application to life.

html-react-parser

    import parse from 'html-react-parser';

    const MyComponent = () => {
      const htmlString = '<div><h1>Hello, World!</h1><p>This is some dynamic content.</p></div>';
      return <div>{parse(htmlString)}</div>;
    };

    import parse from 'html-react-parser';

    const MyComponent = () => {
      const htmlString = '<p>This is a paragraph with a <span>special</span> word.</p>';
      const options = {
        replace: (domNode) => {
          if (domNode.name === 'span') {
            return <strong style={{ color: 'blue' }}>{domNode.children[0].data}</strong>;
          }
        },
      };
      return <div>{parse(htmlString, options)}</div>;
    };

Storybook

• Isolation: Develop components without app complexities (data, routing) in a clean environment.
• Stories: Code snippets defining different UI states (e.g., a button in primary, secondary, disabled states) for a component.
• Sandbox: The Storybook UI where components are rendered and interacted with.
• Add-ons: Plugins that extend functionality, like controls for props, accessibility checks, or viewport resizing. 

1. Install: Add Storybook to your project (npx sb init).
2. Create Stories: In your component's stories folder, export your component and define stories (e.g., export const Primary = () => <Button primary />;).
3. Run: Start the development server with npm run storybook (or yarn storybook).
4. Develop & Test:
   • Use the sidebar to select stories.
   • Interact with components in the sandbox.
   • Use the Controls panel to change props dynamically.
   • Add testing add-ons for quality assurance.
5. Document: Storybook automatically generates documentation from your stories, making them shareable and reusable. 

• Faster Development: Focus on one component at a time.
• Consistency: Build a shared library of components.
• Collaboration: Designers, developers, and stakeholders can review UIs easily.
• Testing: Integrated testing for UI bugs. 

Angular vs React

• Rapid Development & Flexibility: React's minimalist nature allows for quick iterations and a high degree of control over your technology stack.
• Dynamic UIs & Performance: Ideal for applications requiring frequent UI updates, such as social media feeds or dashboards, due to its efficient virtual DOM implementation.
• Small to Medium Projects & Startups: Its gentler learning curve and flexibility make it suitable for smaller teams and projects where a quick launch is a priority.
• Mobile Development: It offers strong support for native mobile app development via React Native. 

• Large-Scale Enterprise Applications: Angular's opinionated and structured architecture provides consistency and maintainability, which is crucial for complex, long-term projects with large teams (e.g., ERP systems, banking platforms).
• Complex Forms & Data-Heavy Apps: Its powerful built-in form handling and two-way data binding streamline data-intensive interactions.
• Teams Familiar with TypeScript/OOP: If your team has experience with TypeScript or object-oriented languages like Java or C#, Angular's structure will feel more natural.
• Integrated Solutions: If you prefer an all-in-one framework that provides most necessary tools out of the box, reducing "decision fatigue" on which external libraries to use, Angular is a strong choice. 

Efficient State Management (Redux, Recoil, Context API, Zustand, etc.)

react package

import {useEffect} from "react";

import { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This side effect updates the document title
    document.title = `Count: ${count}`;
  }, [count]); // The effect re-runs whenever 'count' changes

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

export default MyComponent;

context hooks in react

useContext, allow functional components to subscribe to and consume data from React's Context API, simplifying global state management by avoiding "prop drilling" (passing props down many levels). You create a Context with React.createContext(), wrap parts of your app with a Provider to pass data down, and then use useContext(MyContext) in any nested component to read that data, making it ideal for themes, authentication, or user settings. 

1. React.createContext(): Creates a Context object, often with a default value, that components can subscribe to.
2. <Context.Provider>: A component that wraps a part of your component tree and uses the value prop to provide data to all descendants.
3. useContext(Context): A hook used in functional components to read the current context value from the nearest Provider above it in the tree. 

1. Create Context:
   javascript

2. import { createContext } from 'react';
   const ThemeContext = createContext('light'); // Default value
   

3. Provide Context: Wrap components with the Provider high up in the tree.
   javascript

4. function App() {
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
   

5. Consume Context: Use useContext in any child component to get the value.
   javascript

import { useContext } from 'react';
function Toolbar() {
  const theme = useContext(ThemeContext); // Gets "dark"
  return <div>The current theme is: {theme}</div>;
}

 

• Avoids Prop Drilling: Eliminates the need to pass props through intermediate components that don't need the data.
• Simpler Syntax: More concise and declarative than older methods (like render props or Consumer components) for functional components.
• Global State: Great for sharing data like themes, user info, or language settings across an application. 

// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

@types/react

@types/react is the npm package containing TypeScript definitions for the React library, essential for building React apps with TypeScript to get type-checking for components, props, hooks (like useState, useEffect), and rendering types (like ReactNode). It provides the necessary structure for TypeScript to understand React's API, enabling features like autocompletion and catching errors before runtime, with types such as React.FC for functional components or React.ReactNode for renderable content. 

• Type Safety: Gives TypeScript knowledge of React's functions, components, and props.
• Hooks Support: Includes types for all built-in React hooks, allowing their correct usage.
• Component Definition: Helps define component props, including children (often as React.ReactNode).
• Rendering Types: Defines types like React.Element, React.ReactNode (anything renderable), JSX.Element, etc.. 

• Install it as a development dependency: npm install --save-dev @types/react or yarn add @types/react.
• It's typically installed alongside @types/react-dom for full type support in your React+TypeScript projects. 

• React.FC<Props>: For functional components.
• React.ReactNode: For props that accept anything renderable (children, content).
• React.HTMLAttributes<T>: For standard HTML attributes on components. 

• Ensure your @types/react version matches your react version for consistency, as mismatches can cause issues (e.g., React 18 changes required corresponding type updates)

import React from 'react'

is a JavaScript statement to bring the React library into your file, historically required to use JSX (like <div>) because it converts to React.createElement(), though newer React versions with the "new JSX transform" (React 17+) often make it optional for basic JSX, but it's still needed for Hooks (like useState) and other exports, with import * as React from 'react' also common for importing everything into a React object. 

• Imports React: It makes the React object, containing methods like createElement, available in your component.
• Enables JSX: Before React 17, this line was essential because JSX syntax (e.g., <p>Hello</p>) gets transformed into React.createElement(<p>, null, 'Hello'). 

• import React from 'react': Imports the default export (the whole library) and names it React. Still needed for Hooks.
• import * as React from 'react': Imports all named exports into a single React object. Useful in TypeScript or with specific bundler setups.
• No import (for simple components): With React 17+, the new JSX transform handles basic JSX without needing the import, but you still need it for hooks.
• Specific imports: For efficiency, import only what you need, e.g., import { useState } from 'react'. 

import React from 'react'; // Required for React.useState

function Counter() {
  const [count, setCount] = React.useState(0); // Uses React.useState
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// import React from 'react'; // Not strictly needed for just JSX

function Greeting({ name }) {
  // No React. prefix needed for useState with this setup
  return <h1>Hello, {name}!</h1>;
}

createbrowserrouter in react

in React Router (v6.4+) creates a router using a data-driven approach (array of route objects) instead of JSX, enabling powerful features like data loading (loaders) and mutations (actions), and is the recommended modern way for web apps by managing history via the HTML5 History API for clean URLs. You define routes as objects with path and element (or children) and pass them to createBrowserRouter, then wrap your app with the RouterProvider component. 

1. Install React Router:
   bash

2. npm install react-router-dom
   # or
   yarn add react-router-dom
   

3. Define Your Routes (e.g., in router.js or index.js):
   javascript

4. import { createBrowserRouter } from 'react-router-dom';
   import Root from './routes/Root'; // Your main layout component
   import Home from './routes/Home';
   import About from './routes/About';
   import ErrorPage from './routes/ErrorPage';
   
   const router = createBrowserRouter([
     {
       path: "/",
       element: <Root />,
       errorElement: <ErrorPage />,
       children: [ // Nested routes
         { index: true, element: <Home /> }, // Renders <Home> at '/'
         { path: "about", element: <About /> },
         { path: "users/:userId", element: <UserProfile /> }, // Dynamic route
       ],
     },
   ]);
   
   export default router;
   

   • path: The URL segment. index: true is for the default child route.
   • element: The component to render for that path.
   • children: For nested routes, uses <Outlet /> in the parent.
5. Provide the Router (in index.js or App.js):
   javascript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './router'; // Your router config

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

 

• Data Layer: Supports loader functions for fetching data before rendering, ensuring components get data immediately.
• Data Mutations: Supports action functions for POST/PUT/DELETE requests, improving data flow.
• Flexibility: Configure routes as JS objects (data) instead of JSX, separating concerns.
• Future-Proof: Recommended by React Router as the modern direction

useMemo,useLocation from react

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  // Expensive calculation that only re-runs if 'data' changes
  const processedData = useMemo(() => {
    // Perform complex data processing here
    return data.map(item => item.value * 2);
  }, [data]); // Dependencies array

  return (
    <div>
      {/* Render processedData */}
      {processedData.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

import React from 'react';
import { useLocation } from 'react-router-dom';

function CurrentRouteInfo() {
  const location = useLocation();

  return (
    <div>
      <p>Pathname: {location.pathname}</p>
      <p>Search Query: {location.search}</p>
      <p>Hash: {location.hash}</p>
      {/* Access state data if available */}
      {location.state && <p>State Data: {JSON.stringify(location.state)}</p>}
    </div>
  );
}

React Router DOM

React Router DOM

React Router DOM is a widely used library for handling routing in React applications, particularly those designed for web browsers. It provides a set of components and hooks that enable declarative navigation and URL management within single-page applications (SPAs).

Key features and functionalities of React Router DOM:

• Declarative Routing: It allows defining routes as components, making the routing logic intuitive and integrated with the React component tree.

• Browser-Specific Components: It includes components like <BrowserRouter>, <Link>, and <NavLink> that specifically interact with the browser's history API and render standard HTML elements for navigation.

• Dynamic Routing: Enables the creation of routes with dynamic parameters, allowing for flexible URL structures and data fetching based on the route.

• Nested Routes: Supports the creation of hierarchical routes, where parent routes can render child routes, facilitating complex application layouts.

• Programmatic Navigation: Provides hooks like useNavigate for imperative navigation, allowing redirection or programmatically changing routes based on user actions or application logic.

• Route Guards and Authentication: Can be used to implement route protection, ensuring users are authenticated or authorized before accessing certain parts of the application.

Installation:

To use React Router DOM in a React project, it needs to be installed as a dependency:

npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

export default App;

Note on React Router v7:

With React Router v7, the react-router-dom package primarily re-exports the contents of react-router. While react-router-dom can still be used for compatibility with older projects or during upgrades, new projects are encouraged to use react-router directly for web applications, as the browser-specific functionalities are now integrated within the core react-router package

 

---

react-router-dom enables declarative, component-based routing in React web apps, allowing single-page applications (SPAs) to navigate between different views/components without full page reloads, managing browser history, supporting dynamic URLs (with parameters), creating nested routes for complex layouts, handling authentication (route guards), and providing tools for bookmarkable links and programmatic navigation via hooks like useNavigate (formerly useHistory) and useLocation, all through DOM-aware components like <BrowserRouter>, <Link>, and <Route>. 

• Client-Side Routing: Maps URLs to specific components, rendering them without server requests, perfect for SPAs.
• No Page Reloads: Smooth transitions between "pages" using JavaScript, enhancing user experience.
• URL Management: Creates clean, bookmarkable URLs and uses the browser's history stack.
• Declarative Routing: Defines routes using components like <BrowserRouter>, <Routes>, and <Route>.
• Dynamic Routes: Handles URLs with parameters (e.g., /users/:id) to show dynamic content.
• Nested Routes: Organizes complex UIs by rendering child routes within parent routes.
• Programmatic Navigation: Navigate programmatically with useNavigate (or useHistory) or declaratively with <Navigate>.
• Data Loading: Modern versions (v7+) allow data fetching directly in route definitions (loaders/actions). 

• <BrowserRouter>: The main router that uses the HTML5 History API.
• <Routes> / <Route>: Renders components for matching paths.
• <Link> / <NavLink>: Renders <a> tags for navigation without page reloads.
• useNavigate: Hook for imperative navigation.
• useParams: Hook to access dynamic URL parameters.
• useLocation: Hook to get current location data.
• Outlet: Renders nested child routes. 

• Web Applications: Use react-router-dom for any React app running in a web browser.
• Complex Layouts: Ideal for apps with dashboards, multi-step forms, or admin panels.
• Single-Page Apps (SPAs): Essential for building SPAs that feel like traditional multi-page sites. 

 

 

 

import { RouterProvider } from "react-router-dom"

The import { RouterProvider } from "react-router-dom"; statement is used in React applications to import the RouterProvider component from the react-router-dom library.

Functionality of RouterProvider:

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import About from "./About";
import Contact from "./Contact";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

import {createBrowserRouter, Navigate} from "react-router-dom";

This JavaScript line imports createBrowserRouter for setting up application-wide routing and Navigate for programmatic redirection within React Router (v6+), allowing you to define routes and easily redirect users based on conditions or actions in your web application. It's used to configure your app's navigation structure and conditionally send users to different pages or paths. 

createBrowserRouter: Setting Up Routes

• Purpose: Creates a history object for typical browser navigation (using the History API) and enables powerful data APIs (loaders, actions).

• Usage: You pass an array of route objects (defining paths and elements to render) to it, then wrap your app with <RouterProvider router={router}>. . 

  
  

  javascript

  import { createBrowserRouter, RouterProvider } from 'react-router-dom';
  import { HomePage } from './pages/HomePage';
  import { AboutPage } from './pages/AboutPage';
  
  const router = createBrowserRouter([
    { path: '/', element: <HomePage /> },
    { path: '/about', element: <AboutPage /> },
  ]);
  
  function App() {
    return <RouterProvider router={router} />;
  }
  

Navigate: Programmatic Redirection

• Purpose: A component that renders a <100ms 301 redirect when mounted, useful for authenticated routes or after form submissions.

• Usage: Place it inside a component to redirect to a specific to path; use replace to avoid adding to history (e.g., for auth). 

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const isAuthenticated = checkAuthStatus(); // Your auth logic
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />; // Redirect if not logged in
  }
  return children;
}

// In your router:
{ path: '/dashboard', element: <ProtectedRoute><Dashboard /></ProtectedRoute> }

navigate in react router dom

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/dashboard'); // Navigates to the /dashboard path
  };

  const handleLoginSuccess = () => {
    navigate('/home', { replace: true }); // Navigates to /home and replaces the current history entry
  };

  const goBack = () => {
    navigate(-1); // Navigates back one step in browser history
  };

  return (
    <button onClick={handleClick}>Go to Dashboard</button>
  );
}

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />; // Redirects to /login if not authenticated
  }
  return <div>Protected content</div>;
}

import { useOutletContext } from "react-router-dom";

imports a React Router hook that lets child route components access data (like state or functions) passed down from a parent route using the <Outlet context={...} /> prop, avoiding prop drilling and simplifying data sharing in nested routes. This hook provides a convenient way to share dynamic data between parent layouts and their nested content, making it ideal for managing user info, theme settings, or data fetching states across different views. 

1. Parent Route (e.g., DashboardLayout.js): Renders the <Outlet> component and passes data to its context prop.
   
   

   import { Outlet } from 'react-router-dom';
   function DashboardLayout() {
     const [user, setUser] = React.useState({ name: 'Alice' });
     return (
       <div>
         <h1>Dashboard</h1>
         {/* Pass data (or state/setters) through context */}
         <Outlet context={{ user, setUser }} />
       </div>
     );
   }
   

2. Child Route (e.g., Profile.js): Uses useOutletContext() to get the passed data.
   
   

import { useOutletContext } from 'react-router-dom';
function Profile() {
  // Destructure data from the context
  const { user, setUser } = useOutletContext();
  return (
    <div>
      <p>Welcome, {user.name}</p>
      <button onClick={() => setUser({ name: 'Bob' })}>Change User</button>
    </div>
  );
}

 

• Avoids Prop Drilling: Data is accessible to any nested component without passing it through every intermediate component.
• Centralized Data: Parent routes manage state or data needed by multiple children.
• TypeScript Friendly: Can be easily typed for better development experience

Vite

import { defineConfig } from 'vite'

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // your Vite plugins here, e.g., @vitejs/plugin-react
  ],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

@vitejs/plugin-react

@vitejs/plugin-react is the official Vite plugin for React and React Server Components, providing fast development with HMR (Hot Module Replacement), asset handling (images, CSS), JSX/TSX support, and optimizing builds with options like using SWC for speed, enabling features like React Refresh and TypeScript decorators, making React development in Vite super efficient. 

• Fast Dev Server: Blazing fast starts and instant HMR with React components and MDX.
• JSX/TSX Support: Handles React syntax (JSX/TSX) for seamless development.
• Asset Handling: Imports images, CSS, etc., directly into components.
• React Refresh (HMR): See changes instantly without full page reloads.
• SWC Option: Use the faster SWC compiler via @vitejs/plugin-react-swc for quicker builds.
• React Server Components (RSC): Supports building apps with RSCs via @vitejs/plugin-rsc.
• Build Optimization: Code splitting and efficient bundling for production. 

1. Installation: You install it (often automatically when you scaffold a React project with Vite).
2. Configuration: It's configured in vite.config.js (or .ts).
3. Development: Vite's dev server uses the plugin to process React code quickly.
4. Build: The plugin prepares your React app for production. 

vite package different components

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'lib/main.js', // Your library's entry point
      name: 'MyComponentLibrary', // Global variable name for UMD
      fileName: (format) => `my-component-library.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Exclude React from the bundle
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

React DOM Package

import ReactDOM from 'react-dom/client'

  import ReactDOM from 'react-dom/client';

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    // Your React components here
  );

package react-dom/client

    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(<App />);

@types/react-dom

is a TypeScript definition package from the DefinitelyTyped project that provides type information for the react-dom library, essential for building React apps with TypeScript to get autocompletion and type safety for DOM-specific React functions like ReactDOM.render() and server-side rendering methods, installed via npm or yarn alongside react and @types/react. 

• Type Definitions: Adds static types for react-dom, allowing TypeScript to understand functions, properties, and return types for DOM manipulation within React.
• TypeScript Integration: Crucial for TypeScript projects using React, providing IntelliSense and error checking for react-dom APIs.
• Server-Side Rendering (SSR): Includes types for ReactDOMServer for SSR scenarios. 

npm install --save-dev @types/react @types/react-dom
# or
yarn add -D @types/react @types/react-dom

• ReactDOM: For client-side rendering (e.g., ReactDOM.createRoot()).
• ReactDOMServer: For server-side rendering (e.g., ReactDOMServer.renderToString()). 

react-dom

Axios

Axios in React

Axios in React simplifies HTTP requests using a promise-based API for methods like get, post, put, delete, and patch, offering features like automatic JSON transformation, request/response interception, cancellation, timeout settings, and built-in error handling (rejecting on 4xx/5xx status codes). Key properties include response.data for payload, error.response for detailed HTTP errors, config for settings (headers, timeouts), and axios.create() for custom instances, making API communication clean and efficient in React apps. 

• axios(config): The base method, takes a config object for any request type.
• axios.get(url, config): Fetches data from a URL.
• axios.post(url, data, config): Sends data to create a resource.
• axios.put(url, data, config): Updates an existing resource.
• axios.delete(url, config): Deletes a resource.
• axios.patch(url, data, config): Partially updates a resource.
• axios.head(url, config): Gets headers without response body.
• axios.options(url, config): Checks server options. 

• Promises: Handles async operations with .then() (success) and .catch() (error).
• Automatic JSON: Converts JSON responses to JavaScript objects automatically.
• Interceptors: Modify requests or responses globally before handling (e.g., adding auth tokens).
• Error Handling: Throws errors for non-2xx status codes (404, 500), unlike Fetch.
• Timeouts: Set timeout in config to prevent hanging requests.
• Cancellation: Cancel ongoing requests using CancelToken or AbortController.
• axios.create(): Creates reusable instances with default configs (base URL, headers). 

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/items') // .get(url, { params: {} }) for query params
      .then(response => {
        setData(response.data); // Access data here
      })
      .catch(error => {
        console.error('Error fetching data:', error); // Detailed error handling
      });
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

import axios from "axios";

is an ES6 JavaScript module statement to bring the Axios library into your project, allowing you to make HTTP requests (like GET, POST) for fetching or sending data to servers, commonly used in front-end frameworks (React, Vue) and Node.js after installing with npm install axios or yarn add axios. 

• Imports the library: Makes all of Axios's functions (e.g., axios.get(), axios.post()) available in your file.
• Enables API calls: Lets your web app communicate with APIs to get or send data.
• Uses Promises: Handles asynchronous operations with .then() for success and .catch() for errors, or with async/await. 

// 1. Install first (in your terminal): npm install axios or yarn add axios
import axios from 'axios'; // 2. Import it

async function fetchUserData() {
  try {
    const response = await axios.get('https://api.example.com/users/1'); // 3. Make a GET request
    console.log(response.data); // Log the data from the server
  } catch (error) {
    console.error('Error fetching data:', error); // Handle errors
  }
}

fetchUserData();

• React/Vue: Import at the top of your component files.
• Node.js (CommonJS): Use const axios = require('axios');.
• Browser (CDN): Include <script src="cdn.jsdelivr.net"></script> in your HTML

Chakra UI

1. Create a React Project: If you don't have one, you can use Vite or Create React App.
   bash

   npm create vite@latest my-app -- --template react-ts
   cd my-app
   npm install
   

2. Install Chakra UI: Install the core package and its required dependencies.
   bash

   npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
   

3. Set up ChakraProvider: Wrap your application's root component (usually index.tsx or main.tsx) with the ChakraProvider to enable the theme and styling system.src/main.tsx (or index.tsx):
   tsx

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { ChakraProvider } from '@chakra-ui/react';
   import { App } from './App';
   
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <ChakraProvider>
         <App />
       </ChakraProvider>
     </React.StrictMode>,
   );
   

    

import {
  Box,
  Button,
  Center,
  FormControl,
  FormLabel,
  Input,
  Stack,
  Heading,
  Text,
  useToast,
} from '@chakra-ui/react';
import React, { useState } from 'react';

function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const toast = useToast();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real app, you would handle authentication here
    console.log('Login attempt with:', { email, password });
    toast({
      title: 'Login successful!',
      description: "You've successfully logged in with Chakra UI.",
      status: 'success',
      duration: 3000,
      isClosable: true,
    });
  };

  return (
    <Center h="100vh" bg="gray.50">
      <Box p={8} maxW="md" borderWidth={1} borderRadius="lg" boxShadow="lg" bg="white">
        <Stack spacing={4}>
          <Heading fontSize="2xl" textAlign="center">Sign in to your account</Heading>
          <Text fontSize="md" color="gray.600" textAlign="center">
            Enter your details below to log in.
          </Text>
          <form onSubmit={handleSubmit}>
            <Stack spacing={4}>
              <FormControl id="email" isRequired>
                <FormLabel>Email address</FormLabel>
                <Input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@example.com"
                />
              </FormControl>
              <FormControl id="password" isRequired>
                <FormLabel>Password</FormLabel>
                <Input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="********"
                />
              </FormControl>
              <Button type="submit" colorScheme="blue" size="lg" fontSize="md">
                Sign In
              </Button>
            </Stack>
          </form>
        </Stack>
      </Box>
    </Center>
  );
}

export default App;