<aside> 💡 This page discusses things mostly from Class Based Component prespective.

</aside>

Elements and Components

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

Component is self sufficient part of the app it will contain state, some other functions, styles and will return a React Element.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Elements are the smallest building blocks of React apps. They are immutable. Once you create an element, you can’t change its children or attributes.

React DOM takes care of updating the DOM to match the React elements.

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Because of React elements being immutable and the way it update the DOM we have to think about how the UI should look at any given moment, rather than how to change it over time.

Components in Detail

React makes it very simple: everything is a component. Even plain HTML tags are component on their own, and they are added by default.

Custom Components can be Function based or Class based (if you love this).

• Earlier Functional Components used to be dumb components as they don’t used to have state but with the introduction to hooks we can access state and lifecycle methods in them as well.

Presentational components are concerned with the look while Container components are concerned with making things work.

When React sees an element representing a user-defined component, it calls it and passes JSX attributes and children to this component as a single object called “props”.

There are three related kinds of thing involved here, with their own names:

• Components: Component are basically the class or function itself that takes the props as input, has some state and other methods and finally return a element tree as output. Element tree because it can have some React elements and custom component which will further return the same until we have only React elements.
• Component instances: A Component instance gets created when element gets rendered.
• Elements: Element is basically a simple object that describes a DOM node and its attributes or properties. It is an immutable description object and you can not apply any methods on it.