React Assignment – 1

Basic Questions

  1. Create a functional component called HelloWorld that renders “Hello World”.
  2. Render the HelloWorld component inside App.js.
  3. Create a functional component Greeting that accepts a name prop and displays Hello, {name}.
  4. Pass multiple props (title, subtitle) to a functional component and display them.
  5. Set default props for Greeting so if no name is passed it shows “Guest”.
  6. Validate props in Greeting using PropTypes.string.
  7. Create a Button component that accepts label and onClick as props.
  8. Practice reusing Button component in three different places with different labels.
  9. Create a Card component that renders children inside a styled box.
  10. Compose components: render Card and inside it render Greeting.
  11. Demonstrate prop drilling: Pass data from App → Parent → Child.
  12. Refactor prop drilling with component composition (using props.children).
  13. Build a UserInfo component that accepts name, age, and email as props.
  14. Show conditional rendering inside a functional component (e.g., show “Admin Panel” if isAdmin prop is true).
  15. Create a simple HelloClass component that extends React.Component.
  16. Render text from this.props.message inside HelloClass.
  17. Demonstrate componentDidMount by logging a message when a class component mounts.
  18. Use componentDidUpdate to log when props change in a class component.
  19. Demonstrate componentWillUnmount by cleaning up a setInterval.
  20. Create a comparison component that shows the same UI rendered once with functional and once with class components.

Intermediate Questions

  1. Create a reusable InputField component that accepts type and placeholder props.
  2. Add PropTypes validation for InputField to enforce that type must be “text” or “password”.
  3. Compose multiple components (Header, Footer, Content) together in App.js to form a page.
  4. Build a ProfileCard component that shows name, photoUrl, and bio.
  5. Use default props to provide fallback for bio text if not provided.
  6. Demonstrate prop drilling by passing user data from App → Profile → ProfileDetails
  7. Fix the above case by lifting state up (passing props smartly).
  8. Refactor a functional component to destructure props directly in its parameter list.
  9. Create a List component that receives an array as props and renders <li> elements.
  10. Showcase component reusability by using the same Card with different children (Profile, Product).
  11. Use PropTypes to validate an array of objects passed into a ProductList.
  12. Demonstrate conditional rendering for multiple states (loading, error, success).
  13. Create a class component with a state {count: 0} and increment button.
  14. Use componentDidMount to fetch dummy data from an API and log response.
  15. Add componentDidUpdate that prints when the count changes.
  16. Show proper cleanup of timers in componentWillUnmount.
  17. Compare a counter app built with useState Hook vs class state.
  18. Display lifecycle method calls (mounting, updating, unmounting) in logs using a class component.
  19. Convert a class component with state → functional component using useEffect.
  20. Demonstrate passing props to both a functional and a class component and compare.

Advanced Questions

  1. Build a compound component (e.g., Modal with Modal.Header, Modal.Body, Modal.Footer).
  2. Create a ThemeProvider component using composition, pass theme data down to child components.
  3. Simulate deep prop drilling by passing a prop through 5 levels of nested components, then refactor using composition.
  4. Write a functional Form component that validates multiple fields using PropTypes.
  5. Build a page layout with multiple reusable components (Sidebar, Navbar, DashboardCard) using composition.
  6. Build a class-based Todo App showcasing componentDidMount (fetch initial todos), componentDidUpdate (log changes), and componentWillUnmount (cleanup).
  7. Compare how the same Todo App looks in functional with Hooks vs class with lifecycle methods.
  8. Show performance difference by rendering 1000 list items with functional components vs class components (profiling).
  9. Refactor an existing class component to a functional one with hooks (useState, useEffect) maintaining the same logic.
  10. Create a demo project (e.g., counter, user profile, product list) implemented once with class components and once with functional components and document the differences.