First thing we need to do is provide the Component base class that components will extend. We need a constructor with a props parameter and a setState method that receives a partialState that we will use to update the component state:

The application code will extend this class and then use it in the same way that other element types, like div or span , are used: <MyComponent/> . Note that we don’t need to change anything in our createElement function, it will keep the component class as the type of the element and handle props as usual. We do need a function that creates the component instance (we’ll call them public instances) given an element:

In addition to creating the public instance we are keeping a reference to the internal instance (from the virtual DOM) that triggered the instantiation of the component, we need it to be able to update only the instance sub-tree when the public instance state changes:

We also need to update the instantiate function. For components we need to create the public instance and call the component’s render function to get a child element that we’ll pass again to instantiate :

The internal instances for component elements and dom elements are different. Component internal instances can only have one child (returned from render ) so they have the childInstance property instead of the childInstances array that dom instances have. Also, component internal instances need to have a reference to the public instance so the render function can be called during the reconciliation.