React Overview

Leerob builds a basic list with a React class component, then rewrites it as a function component that renders the same JSX. He recommends function components for simple cases because they require less code and avoid class-specific `this` syntax.

Props let a component receive values such as an array of list items, so the same list can be reused with different content. Leerob maps over the items and adds a `key` to each rendered list item. Destructuring extracts `items` from props, while rest and spread pass remaining props such as `aria-label` to the unordered list.

Leerob adds a search input that filters the list as the user types. The class component initializes filtered items from its props, binds its filter method, copies the original array, and updates state with matching items. The example uses `filter` and checks whether each item starts with the search value.

Leerob rewrites the filter as a function component using `React.useState`, with `filteredItems` and `setFilteredItems` replacing class state and `this.setState`. The hook version removes the constructor and method binding while keeping the same filtering behavior.