<-My Blog->

1. What is ReactJS?

2. What is JSX?

3. Explain the Virtual DOM and its advantages.

4. What are props in React?

5. What is state in React?

6. What is the difference between state and props?

7. What are React hooks?

8. What is a higher-order component (HOC)?

import React from 'react';

// A functional higher-order component that adds a background color to a component
const withBackgroundColor = (WrappedComponent, color) => {
  return (props) => (
    <div style={{ backgroundColor: color }}>
      <WrappedComponent {...props} />
    </div>
  );
};

// Component that will receive the background color enhancement from the HOC
const Content = ({ text }) => {
  return <div>{text}</div>;
};

// Wrap the Content component with the withBackgroundColor HOC
const ContentWithBackground = withBackgroundColor(Content, 'lightblue');

// Usage of the enhanced component
const App = () => {
  return (
    <div>
      <h1>Functional Higher-Order Component Example</h1>
      <ContentWithBackground text="Hello, HOC!" />
    </div>
  );
};

export default App;

9. Explain the concept of Context in React.

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

// Create a context
const ThemeContext = createContext();

// Provide the context value at the top of the component tree
function App() {
  const theme = 'dark';

  return (
    <ThemeContext.Provider value={theme}>
      <Navbar />
      <Sidebar />
    </ThemeContext.Provider>
  );
}

// Consume the context value using a functional component and useContext
function Navbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

// Consume the context value using a functional component and useContext
function Sidebar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

export default App;

10. What is Redux?

11. What are controlled components?

import React, { useState } from 'react';

function ControlledComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange}
    />
  );
}

12. What are uncontrolled components in React?

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    // Access input value using the ref
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Log Input Value</button>
    </div>
  );
}

13. What is key prop?

import React from 'react';

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  return <ItemList items={items} />;
};

export default App;

import React, { useState } from 'react';

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

  const onIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent count={count} onIncrement={onIncrement} />
    </div>
  );
}

function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

const FragmentExample = () => {
  return (
    <>
      <h1>React Fragments</h1>
      <p>This is a paragraph.</p>
    </>
  );
};

export default FragmentExample;

import React from 'react';

const FragmentExample = () => {
    const items = [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Carol', age: 28 },
    ];
  return (
    <div>
        {
            items.map((item) => (
                <React.Fragment key={item.id}>
                <h1>React Fragments</h1>
                <p>This is a paragraph.</p>
                </React.Fragment>
            ))
        }
    </div>
  );
};

export default FragmentExample;

import React, { PureComponent } from 'react';

class MyPureComponent extends PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

export default MyPureComponent;

import React from 'react';

const MyPureComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

export default MyPureComponent;

import React, { forwardRef } from 'react';

// Child component using forwardRef
const ChildComponent = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

// Parent component using the ChildComponent with a forwarded ref
const ParentComponent = () => {
  const inputRef = React.createRef();

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

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

export default ParentComponent;

import React from 'react';

const ExpensiveComponent = ({ data }) => {
  // Imagine some complex and time-consuming rendering logic here
  console.log('ExpensiveComponent is re-rendered');
  return <div>{data}</div>;
};

// Wrap the ExpensiveComponent with React.memo
const MemoizedExpensiveComponent = React.memo(ExpensiveComponent);

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>React.memo Example</h1>
      <button onClick={incrementCount}>Increment Count</button>
      <p>Count: {count}</p>
      <MemoizedExpensiveComponent data={count} />
    </div>
  );
};

export default App;