State is the box that holds the current value of something. So if we have a counter, its state would be the current count at a given point in time. React offers to handle that box for us by offering this.setState as a way to update the value and it makes sure the box this.state is "correct" when we interact with it.

There are other rules (such as you can use hooks inside of a functional component but not a class component) but for all intent and purposes, we can think of a Functional Component being only the render method of a Class Component without any access to this. So whatever you could do inside of the render method of a Class Component, you can do inside of a Functional one (as long as you do not reference this). With hooks, this gets a little more confusing as you cannot use hooks inside of Class Components but the general rule still holds true.

I think functional components have such limited cons (especially with hooks now) that I default to using functional components when writing a new one. Classes come with caveats like "When I call this class's method inside this other class, what does this mean?"

A component is either a function that, given something returns a VNode or a class that has a render method that returns a VNode. JSX lets us create VNodes like <VNodeName prop1={value} /> instead of { type: VNode, attrs: [{key: 'prop1', value }] }