If you have already made up your mind about using the Streamlit component React template, then feel free to skip this part and go directly to the Project Setup.
Much has been written on the subject of React’s steep learning curve, therefore I went into the custom component beta with the thought that 6 months of Vue.js years ago would not cut it to write awesome Streamlit components.
While React is known for building performant UI blocks, there are some other aspects that should be considered:
Fortunately for us React beginners, Streamlit deals with all of the “harder parts” of writing a web app in React, like routing, event management, responsive app layout, error handling, and global state management for all rendered components.
Plus, given Streamlit’s design, a component cannot call nor interact with other components using callbacks. In the same way that you can write a Streamlit script without callbacks between components, you can write a frontend component code without worrying about its behavior if other widgets on the same page call it.
Learning basic React also gives you access to a massive ecosystem of React components already written by the community, all which you can wrap inside Streamlit to build your very custom data web app experience!
This tutorial assumes no React knowledge — you will learn the necessary concepts to articulate your code around React’s render lifecycle in Streamlit components.