1. What is React?   

           React is a JavaScript library used to build user interfaces (UI), especially for modern and dynamic web applications.
  
           It is mainly used for building Single Page Applications (SPA) where content updates without reloading page.

           React is developed by meta.

         ** Why is React Needed?
                 -> Without React:
                        - UI becomes hard to manage
                        - Code becomes messy and repetitive
                        - Updating UI is slow
                        - Difficult to scale applications
                -> With React:
                        - UI is divided into reusable components
                        - Faster updates using Virtual DOM
                        - Better code organization
                        - Easy to maintain large applications

          ** Examples:
                        -Updating cart items without page reload
                        -Live search suggestions
                        -Dynamic dashboards
                        -Social media feeds

  1. What are the main features of React?  

       React provides several powerful features that make frontend development easy, efficient, and scalable.

       **  Features:
           1. Component-Based Architecture
               → Break UI into small reusable pieces
               → Example: Navbar, Card, Button
           2. Virtual DOM
               → Faster updates and better performance
               → Only changed parts are updated
          3. JSX
             → HTML-like syntax inside JavaScript
             → Makes UI code readable
          4. One-Way Data Binding
             → Data flows in one direction (Parent → Child)
             → Easy debugging and control
          5. Reusability
             → Write once, use multiple times
             → Reduces code duplication
          6. Fast Rendering
             → Updates only changed parts of UI
             → Improves user experience
          7. Props (Data Passing System)
             → Used to pass data from parent to child components
             → Read-only (cannot be modified)
             → Helps in component communication
          8. State (Data Management)
             → Used to manage data inside a component
             → When state changes → UI updates automatically
          9. Hooks
             → Special functions to use state and other features in functional components
              ** Common Hooks:
                     - useState() → manage state
                     - useEffect() → handle side effects (API calls, etc.)
                     - useContext() → global state sharing
 
        10. Lifecycle Management
             → Controls what happens when component:
                     - Mounts (created)
                     - Updates
                     - Unmounts
             →  Mostly handled using useEffect in modern React

        11. Strong Ecosystem
             → Huge community support
             → Popular libraries:
             → Routing
             → State management
             → UI libraries

  1. What is JSX?

           -> JSX (JavaScript XML) is a syntax for javascript that allows writing HTML-like code inside javascript.
           -> It makes UI code easier to understand and write.

     ** Why  Needed?
             → Without JSX:-
                   - Writing UI in pure JavaScript in complex.

             →  With JSX:-
                 - Code becomes readable
                 - UI structure looks like HTML
   ** Example:-
          const element = Hello World;
 
   -  JSX is not understood by browsers directly. It is converted into JavaScript using tools like Babel.*
 

  1. How does JSX work?

        JSX works by converting HTML-like syntax into JavaScript.
       ** How It Works:
                 - Developer writes JSX
                 - Babel converts JSX into JavaScript
                 - React uses React.createElement()
                 - Elements are rendered to the DOM
      **Example:
            // JSX Code
              const element = Hello;
          // Converted Code
             const element = React.createElement("h1", null, "Hello");
     -> Browsers understand only JavaScript, not JSX.

1. What is the Virtual DOM?
       - The Virtual DOM is a lightweight copy of the real DOM.
       - React uses it to improve performance.

     ** How It Works:-
       I. Virtual DOM is created
       II. When data changes, a new Virtual DOM is created
       III. React compares old and new Virtual DOM (diffing)
       IV. Only changed parts are updated in real DOM

    -> Without Virtual DOM:
            - Full DOM updates -> slow performance
    -> With Virtual DOM:
           - Only required updates happen
          -  Faster rendering
    **Result:
          - Better performance
          - Smooth user experience

  1. How does React update the UI?

  2. What is a React component?

  3. What is the difference between a React element and a component?

  4. What are props in React?

  5. What is state in React?

  6. What is the difference between props and state?

  7. What is a functional component?

  8. What is a class component?

  9. What is the difference between functional and class components?

  10. What are fragments in React?

  11. What is the purpose of the key prop?

  12. What happens if we use array index as key?

  13. What are controlled components?

  14. What are uncontrolled components?

  15. How does React handle forms?

  16. What is event handling in React?

  17. What are synthetic events?

  18. What is conditional rendering in React?

  19. How do you render a list in React?

  20. What are default props?

  21. What is prop drilling?

  22. What is lifting state up?

  23. What are React Hooks?

  24. Why were Hooks introduced?

  25. What is useState?

  26. What is useEffect?

  27. What is the dependency array in useEffect?

  28. What are side effects in React?

  29. What are keys in React lists?

  30. What is JSX transpiled into?

  31. What is ReactDOM?

  32. What is the difference between React and ReactDOM?

  33. What are stateless components?

  34. What are stateful components?

  35. What are inline conditional expressions?

  36. What is the children prop?

  37. What is React.StrictMode?

  38. What are PropTypes?

  39. What is create-react-app?

  40. What is the difference between HTML and React event handling?

  41. What are portals in React?

  42. What are refs in React?

  43. What is useRef?

  44. What is memoization?

  45. What is React.memo?