Recap

You should now have your first pair of Streamlit custom components! It is time to circle back to the three original questions:

How do we tell Streamlit to map a Streamlit call to specific frontend code ?
We first declare a function which interfaces with the exposed React component on the web server http://localhost:3001, using declare_component. The resulting function _component_func calls the frontend code for us, and transfers any argument as props to the React component in the template. We wrap this interface with a public method so the user can play with it without having to be bound to the React interface.

How do we define what is rendered on the browser ?
Now that Streamlit links to our React component, all frontend code is defined there while Python parameters are passed as props.args for component customization. A key argument is also available on the _component_func which serves to prevent the component from remounting anytime its props are modified.

How do we handle interactivity and send data back to the Python script ?
Streamlit provides a Streamlit.setComponentValue method to push data from the frontend into Streamlit. A default argument specifies the initial value when the user has not interacted with the component yet.

This is it for the basics of Streamlit components! The last part of the tutorial will delve into some component ideas that you may wish to explore.