How/where are Python Components converted back to React?

Dash Python
1

I am following through the logic in Dash and understand how classes can be dynamically created from existing React components (in addition to what is provided in the core library). I also see that the underlying Flask server is eventually used to serve an index file that contains all of the necessary scripts, CSS, etc in addition to the React app entry point. It is really nice work. The only piece of the puzzle that I am missing (and cannot seem to find in the code) is where the Python representation of the React app is converted back into Javascript. To me, this is the only logical way Dash could work… Python is used to create the relationships between all of the components (which must be serializable), and then this App representation is dumped to a .js file that is served within the index template.

Could anybody point me to where in the codebase this conversion back to javascript occurs, or if I am way off the mark with the way the machinery works could you explain how it actually functions?

2

Right here actually – it’s pretty small: https://github.com/plotly/dash/blob/5ac9a3b2a15dc82461fbc632dd2d0b59f966f1f4/dash/dash.py#L285-L293

This just serves the initial layout.

Also this part will serialize the result of callbacks and send them to the front-end: https://github.com/plotly/dash/blob/5ac9a3b2a15dc82461fbc632dd2d0b59f966f1f4/dash/dash.py#L885-L888

3

Thanks, I overlooked this. A small follow up — I’m trying to make the connection in my head between the JSX components that you write in react versus what is generated in Dash. In React the JSX components are compiled during build into raw JavaScript. The code you just highlighted is a JSON seriaization of the Python Components in the Dash Layout… is this serialization then fed to some additional build step? For context I am very familiar with Python and back-end, but much less so with front-end web development, so I am trying to put the pieces together.

4

Yeah, the JSON representation is fed through this function: https://github.com/plotly/dash-renderer/blob/b1cfc996563bd0b57f9487b15212dd5b782e5b3a/src/TreeContainer.js#L23-L82 in the renderer which creates the React components

5

Beautiful, that resolves a big unknown in my head, and I don’t think it would have been easy for me to find that bit of JavaScript. Makes perfect sense — thanks a lot.

By the way, not sure if I’m alone in wondering about this connection, but in my opinion it would be very helpful to have a brief explanation in the Dash docs that basically states that “a full Python representation of the app and its components is created, serialized, and fed to a generator which creates the fully instantiated React components that are actually rendered in the browser.”

6

Did you see this? Build Your Own Components | Dash for Python Documentation | Plotly

7

I did and that made clear the flow from React to Python. Upon re-reading I do see that the very last item on the page summarized my point above. Thanks!