One note though: The most important thing to learn about “Components” is actually not that they combine code and html! The most important thing about React-Components is “Composition Abstraction”.
- Composition of several Elements
- Abstraction: Creating new “Custom Elements” out of composed Elements
HTML itself only realizes 1 and 2. With new HTML standards like “Custom Elements” Step 3 can get realized. React actually realizes all three parts through its virtual DOM abstraction — and works also in legacy Browsers without needing particular Polyfills.
Composition is also important concept as an alternative to Inheritance. With Composition Abstraction in React, you create an “IconButton” not by inheriting “Button” and overloading its render-Method — you just create a new Component which contains a Button and an Icon (both Components too). Abstraction through inheritance quickly grows inflexible.