I am going through the React challenges, and I learned how to declare JSX elements, functional stateless components, and ES6 style class components in React.
From what I understand, the ES6 has the most functionality as it extends React.Component. Should we, and if so, why/when, use JSX elements and functional stateless components instead?
I’ve never had to declare a JSX element the way it’s described here (and as it was in most introductions to JSX I’ve read), and I’ve never seen it commonly used in any codebase I’ve worked on: imo it’s there for completeness.
Stateless components are good because they’re very easy to reason about and test (if you give them X they always produce Y). You basically can’t do anything useful without state though. Hooks allow stateful logic in functions, so function components can do everything class-based components can do, with a simpler API, so Imo class components are never needed in a new project. Hooks are not taught in FCC afaik at the minute as the curriculum predates them. You’ll be fine using classes, but almost all code examples, articles and documentation from the past couple of years that you read is going to be based on a function/hooks API so becoming familiar with that is important.
I see. I’m really glad I asked then. I did see some mention of hooks in one of the challenges, but nothing in-detail. Thanks for your help!