Virtual DOM and React

JupyterLab is based on PhosphorJS, which provides a flexible Widget class that handles the following:

• Resize events that propagate down the Widget hierarchy.

• Lifecycle events (onBeforeDetach, onAfterAttach, etc.).

• Both CSS-based and absolutely positioned layouts.

In situations where these features are needed, we recommend using Phosphor’s Widget class directly.

The idea of virtual DOM rendering, which became popular in the React community, is a very elegant and efficient way of rendering and updating DOM content in response to model/state changes.

Phosphor’s Widget class integrates well with ReactJS and we are now using React in JupyterLab to render leaf content when the above capabilities are not needed.

An example of using React with Phosphor can be found in the launcher of JupyterLab.