What React is doing under the hood to Create Components.

React is a special framework because it encapsulates your UI(screen) into components. Unlike the tradition pure HTML page that is composed of html elements a React Page is composed of components. Thus your UI will be composed of React Elements.

React Components are just functions that create React Elements. A React Component is an ES6 class that will render the React Element. This class is a subclass of the React.component class. Thus It will have all of the methods that React.Component has.

The super-class has all the cool and necessary methods React offers. React also has this helpful chart to show what life cycle methods of this class are running. This is a good rabbit hole to go down but this blog post is about creating Elements in React.

To understand what is happening let’s start in reverse order. A react class is just a JavaScript class that inherits from the super-class React.component. This class is just a function that creates Components that create Elements.

When we make a React element something happens that we don’t see. If the above example were placed in a React Component and rendered to the screen the method React.createElement is called. This method has there parameters: They type of html element that will be generated, the props the element will have, and the children of the element. The two pics will create the same Element to render to the screen.

To recap a react app is made up of React components that make react elements that make elements with the method React.createElement under the hood.