Brain dump on React concepts of element, component, instance

react-component.md

React: Element, Component, Instance

Element.

<Text>Hello, gini</Text>

Element with clothes off.

{
  type: Text,
  props: {
    children: 'Hello, gini'
  }
}

Component.

() => <Text>Hello, gini</Text>

Component. named so it's reusable.

const Hello = () => <Text>Hello, gini</Text>

Component, but classy. Have more control over it's instance's lifecycles.

class Hello extends Component {
	render() {
		return <Text>Hello, gini</Text>
  }
}

Instances never show up in code. They only exist in runtime. Their runtime behaviour is determined by the use of this in class components, or hooks in function components.

Distilled from this react blog