Concepts

Components

React uses components, which you can think of as your own re-usable "HTML tags". For example you could write a navbar.js and navbar-item.js file and then use them in another file:

Copy
import Navbar from "./navbar.js"
import NavbarItem from "./navbar-item.js"

export default () => (
  <Navbar>
    <NavbarItem href="/">Home</NavbarItem>
    <NavbarItem href="/about">About</NavbarItem>
    <NavbarItem href="/contact">Contact</NavbarItem>
  </Navbar>
)

Reactive

React is reactive, meaning a change in a component's "state" triggers a re-render.

Let's say you have a variable counter and you display that in your HTML (actually you're using JSX and not HTML, more about that later) then every time the value of counter changes, the HTML where you used that variable in re-renders to show the current value of the variable.

Virtual DOM

Since changes to the DOM (Document Object Model, basically the "living form of your HTML" that contains all your HTML elements) are very resource-expensive, React maintains a so-called "Virtual DOM", which is kind of a copy of the real DOM. All changes are done to the virtual DOM at first. After changing the virtual DOM, efficient method to make these changes to the real DOM is calculated and the real DOM is being updated.