UI Code Comparison: React (JavaScript) vs Flask and Streamlit (Python)
⚛️ React (JavaScript) 🟨 (Source: https://react.dev/learn )
The following code is written in JavaScript using React, a library for building user interfaces. It uses JSX (JavaScript XML) syntax and defines two functional components: MyButton and MyApp.
This code displays a heading and a button. React uses JSX, ES6 module syntax (export/import), and is JavaScript-based.
And here’s the result:
(Source: https://codesandbox.io/p/sandbox/xftrpt?file=%2Fsrc%2FApp.js%3A10%2C11 )
🐍Python (Flask ☕ + Jinja2 🔧)
To achieve similar UI in Python, we can use a web framework like Flask or Django.
Here is a simple example HTML template using Flask and Jinja2:
1.Create a new project folder:
mkdir my_flask_app
cd my_flask_app
2. Create the Python file:
app.py
3.Create the templates folder. This is where Flask looks for HTML files by default.
mkdir templates
4. Create the HTML file inside templates
index.html
5. Final Folder Structure Should Look Like:
The result:
This renders a webpage at localhost:5000/ with a heading and a button, just like React example above:
Python (Streamlit)
In order to create a similar and interactive result by using purely Python (without writing HTML), we could use Streamlit or Anvil.
Streamlit allows to build interactive web apps with pure Python. It's easier and doesn't require HTML or JS.
- Install Streamlit:
pip install streamlit
2. Create a Python file (e.g.: app.py)
app.py
3. Import streamlit as st
4. Run the app:
streamlit run app.py
This will open the app in a browser window at http://localhost:8501:
