ReactPy Library: Build UI in Python with ReactJS Features

Key Takeaways

hello everyone welcome to AI anytime Channel you know in today's video we are going to have a look at react pi so it's a new library for building UI user interfaces in Python without JavaScript okay so it's like react mate with python okay it's a very new release okay I think this this library has been released this week itself and we are going to have a look we are going to explore this Library okay from the documentation and from the GitHub repository that how we can use this library to build you know python application faster or is it going to help us you know in data science or AI or machine learning workflow and how it's going to look like when we are going to utilize this versus you already have you know multiple Frameworks to create web applications and we have also if you talk about python we have extremely we have Pi script we have multiple Frameworks which helps you write you know code with less amount of code and also create web applications but how react Pi is different from those you know Frameworks or library because react is is a JavaScript library if you are not familiar with react okay you can go ahead and look at react.js as well so if you see currently I am on react Pi okay it says react Pi the library for building user interfaces in Python without JavaScript okay so react by interfaces are made from components which is the core of react which is the library in JavaScript as I said you know react was developed by Facebook and if I'm not wrong in 2013 okay and it's one of the most used JavaScript library at this moment okay and they are famous for components they have multiple features they use utilizes virtual Dom you know they have their component based architecture they have react hooks router Etc so there are you know abundance of you know features when we talk about react.js and how we can you know use those uh basically the features or the services that react.js provides and how we can bind it together with python to build python applications uh with ease and also escalable okay so if you see it says which look and behave similarly to those found in react JS and designed with Simplicity in mind react Pi can be used by those without web development experience people like me I don't have much wave development experience you know while also being powerful enough to grow with your Ambitions okay so I can myself write a bit of code in JavaScript but I don't have much expertise when it comes to JavaScript guys okay so you know people like me who can basically utilize this to build applications okay on having the same features of react.js at least on some extent okay so if you see it says at a glance they have given you some example code if you see it says a hello world application as usual okay and we click on result it will show you hello world so if let's come back to main dot pi if you see on Main dot Pi it's it's have a function it's called Define app function return HTML dot H1 which is a header one okay HTML which is going to render the UI you know through HTML and then on H1 having H1 tag and we're passing that string hello world over there okay and then we are running the app we are using the Run I know from react by import so we are using component HTML so if you see the structure guys okay if you are family let's talk about python you know mainly when you're talking talking about the programming here or if you see this programmatically this maybe look like a decorator okay so if you are familiar with flask or fast API or Django or any other you know python based Frameworks okay you will see that this look like a decorator when we talk about python Frameworks okay and then we have a function then and we're running that function okay through that run app okay so this is how it looks like currently okay and they have given you some sample examples you can see the documentation over here you can just read about adding interactivity you know creating UI interfaces Etc they have managing State because State Management is you know one of the core feature when you talk about react.js which is currently not available for react Pi in this case you can see escape hatch is understanding react by these are all under construction so it's in a very very early stage guys okay I just wanted to create this video to give you some maybe some update because I was just reading about react by you know Reddit community and I thought okay I'll create a video so you guys can also get little bit of awareness about react pi and you can also explore that okay I'm still myself exploring it at this moment so and they have our GitHub repository as well it's by reactive python okay and you can see react Pi it's already has around 86 issues people are talking about different books or feature enhancement Etc if you come over here the same thing they have given you at glance you know some something like you know Jupiter notebook you can also use that inside Jupiter notebook but the good thing about this is that it supports multiple back ends okay so the thing that you see it's it supports flask it supports fast API tornado for example which is again used by stream lead okay or streamlit you just tornado as a back-end engine there because you can see you can utilize this as well as a back-end engine okay to run react Pi on top of it so it looks good you know and you can also externally use it as Jupiter plotly Dash okay for dashboard Etc and then you have Django as well that's that's how you can leverage this at least you can bind it together with back-end engines as well both internally and externally itself so externally when I say you can use react Pi inside jupyter notebook okay you can also you know do that as well if you click on the Jupiter as well over here you can see that now you'll see here they have given you some documentation that how you can utilize this inside in a jupyter notebook as well okay so this is a GitHub repository that's their documentation page so how how we're going to install this guys if you click on getting started it says installing react by if you click on that what it will show you that it depends if you want to install it fully you can just do pip install react pi to install it completely the full version of react Pi which is available at this moment but if you want to rely on a Starlet back end you can also do that as well so there are native backend you can see over Starlet or tornado or fast API for example I have installed pip install react Pi so let me show you my folder restructure this is my folder structure let me show you so we have a virtual environment that I've let me open that in terminal and code itself so let me just do that so what I will do I'm gonna go inside V and V C D V and vcd Scripts you know dot slash activate and CD dot dot serial dot clear and I will go inside code now if you see I have a file that I'm going to utilize it how we are going to you know so so this Json file on the react by using react Pi on the UI and how easy it is to show that okay without having much information about react.js or JavaScript or HTML you know all together how I am going to show this as well so what I'll do I'm just going to create an app.pi so programmatically we are not changing the habit of using python guys we are still going to use Python with little bit of flavor of react okay the react JS okay and I'm talking about programmatically not from the feature standpoint like you know hoax or hooks or routes or we have seen we are talking about hatches or is State Management Etc we are not going to focus on that in this video at least we're just going to see how we can how we can install this how we can use the how we can use the code that is available on the documentation how we can make some changes to write our code and see if we are able to make some modification Okay so already have installed you can see in this virtual environment in this virtual environment if you come to lib you will see the things have been installed into it okay here over here you can come down you'll see that we have something called react Pi when you click on react by it will show you everything inside it so we have installed react Pi let me just minimize this over here and in app.pi what we're going to be able to write the code now is if you come over here okay let me show you okay you have they have a good documentation at least so far okay so you can see this this is how you run this from react by import HTML if you click on this let me just click this and let me just show you okay app.pi if you click on this what they are doing so they are from react file they are importing HTML because that's where we are going to render this on HTML we are going to use a div element or div tag in inside that div tag we have a H1 tag header one my to-do list and then we have some list inside it you know as a to-do like design a cool new app build it share it share it with the world etc etc how do we run this same as we always do to run a python application so that's what we are going to do here python app.pi so when you click on python app.pi it will open you know uh so it's not showing you anything because you're not utilizing using any you know back end and then over here okay any component Etc but this is what we are going to do we are not using any component or stuff okay so if you come over here let me just remove this let's see how we are going to use the first component so this is how we are going to use the first component okay we are not doing run here okay we don't have any function defined so if you see over here in this it's it does from react by import component HTML and run and if you see it has a component defined inside this component is has a photo it uses a image tag inside HTML it has a source of that image with you know it's in a style it has a width of 50 and in all it has a poppy Edge stuff okay so let's copy this okay and you come back over here let me just remove this and let me just save it so you know running this function over your photo that you see now if you come back what it does it says it's running if you can't running so now you see UV con what does it mean guys okay it's running with Starlet application so uvcon is a you know basically a waveform that helps you learn Starlet or fast API based application and it runs on Port 8000 by default so if you come over here you just do localhost 8000 it will open the react by if you see over here it it basically shows you an image that is available on this you know URL which is the source from pick some dot photos ID whatever 237 500 or 3 so this might be I'm not sure this might be height of width and you can see it over here okay this is one of the example that how you do it how you run this okay you have a learning you have a photo and you just run it over here this is basically the tag that you have to understand a bit when we're running it for the first time now let's do let's see how we can you know make some changes and how we can use this data I have a Json file here 2019.json this is the same Json file that I have used in previous videos where I have created chat CSV with uh I think chat with CSV okay so I've created an application where I have used this GDP data this is a data of GDP of different countries Finland Denmark Norway there are multiple countries their GDP there's four Etc so there's some information about the countries how we can leverage this to you know do that so let me just help you understand so from react Pi input component HTML run let's also have hooks and now let's also have something called pathlib and Json because it's a Json file and we also need pathway because we need the path there so some path lab import path this should be Capital here the first piece of caps and then let's have import Json so I'm just going to do it over here import Json and inside that let's have something called Define some you know constant we're not going to change this so here path and inside this I'm just gonna do file this looks nice so this is seven defined now our data path so let's do that and in data path we are going to do here Dot so what we can do is parent folder and space and then here we can have 2019.json what is the file name that we have so this is done and then just load the data by so Json dot loads not coding sorry Json dot loads and here I'm just gonna pass that data path dot read take we have to read that text so data underscore path excuse me data underscore path Dot read this looks good and it's a function so this is okay now we have loaded our data now let's define the component guys so I'm just going to do component as I said this might look like a decorator when you talk about python it's not a function it's just like a weird defining a component and now we'll Define let's define a function so you know you can use snake case you can use camel case when you're talking about you know writing the code the way we write our code guys so in JavaScript or python there's a different way of different structure or style of writing code okay we follow a snake case for some programming languages we follow camel case for some other programming languages okay so here let's follow little bit of JavaScript style okay so so data so data and info so this is the function that I'm writing okay and now here in so data info I'll just have index set index so let me first show your Json file if you see so we have index one two three and inside that we have key values pair that we have to you know consider when we are defining the structure so set index and let's have hooks dot U State we are going to use the state because we'll have an on click button so once you click on the button next it will show you the next next values for that uh the country that we have okay so Hooks and then we'll use the use state feature so you state and let's pass zero so this is done and now let's have Define handle and let us let me see if we have some some documentation related to this guys okay so if you come over here I don't know if we have something like this I don't see let's let's write it ourselves okay so Define handle click as we say we have an on click event so click event this looks nice and then we have set index will just iterate it with the plus one so index plus one so this looks good index plus one now we have this diff where Define handle click event set index index plus one and then so let's see what are the things that we have so we have overall rank country it is okay so now let's have a something first let's define a bounded index so bounded index and then we have index and we have to read the length of entire data so length and we can use this is how we do it in pythons index by length of data and that's our bounded index and then we can we need to make this string so bounded index uh and that's for the string and then end and bounded index and then plus let's add plus one so iterated plus one and now we have our data item so data item and in this data item data and it's boundary Index this position is okay so data item data bounded index which is the list and and now let's see what are the so first we have overall rank so once we Define first we can just copy paste overall rank overall Rank and in overall rank data item and inside that we're just going to pass this so we're just going to write Over All overall space rank okay this is okay overall now let's just copy paste guys so overall rank I'm just gonna do Ctrl V so here in overall rank we'll just replace this with uh country let's see country or regions country underscore or region and here I'm going to write country or reason the next is score so this will go score cool so let me write this guy for the all the values that we have over here and I will once I complete it I will again you know resume the video from there so now you can see guys I have written up to the perceptions of corruption which is my last value here perceptions of Curves inside this Json file and now what we're going to do we are going to just return this we have to return this on using HTML div and we'll have an on click button of next and then we will have some H2 or H3 tag to present the value okay or the return the value or display the value at whatever you call it so HTML div and inside this div I'm just going to write all for all the values that we have so the first thing that we have we will need a button which with the end user will click and it will go for the next to show the all the values for you know respective countries there okay so HTML button and here I'm just gonna write you know on click so it's on click and this on click what you're gonna do here we are on click is nothing but the handle clicks on click we have defined above you can see above right handle click so it's not an event which already I pass it on top handle click and then we're just gonna do next here so just let's write next which is the label for that button next excuse me this is going to be out here so next let me just do one thing Ctrl B and this is okay so HTML button next and this will be here like comma and then this looks good so we have HTML button on click okay and handle click and this is not going to be okay this looks nice okay and we'll click and now so we have HTML dot button on click and handle click and next and then we'll use a S3 tag guys so HTML dot S3 and then we will show all our values on the UI okay the user interface that we are trying to build here so you can see html.s3 and let's just do that so overall overall Rank and I'm just gonna do here overall rank let me just when inside here and let me just write over all whatever we have defined okay overall rank so I'll just copy paste here copy fish so we have overall Rank and it will all go home let me just do that so let me just do that so what I will do guys I will just pause the video because I have to re and rename it okay for all the this value here so let's pause the video and I will resume it once it is done so you can see guys I have also completed this HTML dot S3 tags where we are defining all this you know uh the labels and then we are returning this rank country score GDP whatever key value pair that we have inside this Json file okay for Capital uh for the different countries and so now what we are going to do if you see we have a function called so data info so this function now kind of contains our values that we are going to basically display on the user interface you know with the help of react Pi so we have defined a component inside that we have a function and that function uses the this data that we have loaded Json dot loads and we're just going to we have an on click event there so when we click on the button it shows you the the uh values for the respective countries okay and when you click on next it shows the next one now what we're going to do here we have to run this so we're going to use run that we have imported on top so if you see on top we have from react by import component HTML run and hook so from this run we're just going to use that from run class or module in Python we call it so in run we're just going to use this you know so data info so so data info okay and not the we don't need to use that fan fantasies there okay run for data info so how are you going to run this guys now is that okay it's same way that we run so we'll come over here we'll do python app.pi which is file name so Python app.pi and once you click on that you will go to localhost 8000 and we'll click on enter now you'll see the details over here so the values that we have inside the Json file so overall rank one for Finland the score the other values like GDP per capita all the information that we have inside the Json file for countries you can see it over here when you click on net which is an on click event okay so we have that uh if you see if you come over here you'll see hooks dot use underscore State okay that we are using the state over here for on click event as you can see so this page is not getting refreshed guys okay and you can see just clicking on next you will see all the next values for the countries that you can see so this is what we did in you know in this video guys so you can see it over here maybe you can explore more on react Pi that how it helps you create you know user interfaces in Python with the react.js features if people like me who don't have much expertise in web Technologies can you know leverage this Library you know to create applications you can go through the documentation the GitHub repository you can also find it out if you need the code is available on my GitHub repository I also share that link in the description please participate in the uh discussion on GitHub you can see on this repository react by the GitHub discussions with a lot of discussions going on currently about you know Discord server and how in how we can integrate react Pi with Django or you know whatever is required right people are discussing about it over here you know connecting to metamask for example for some blockchain capabilities also you can also have a look at that as well so this is what I wanted to cover in this video guys you know react I wanted to see how we can write some code with the react.js features in Python and how we can install the library and write some code to run that and you can see we have user installed backend to learn this you know only we can so I hope you liked the video guys if you like the video if you like the content you know please give a thumbs up okay please hit the like icon there if you haven't subscribed the channel yet do subscribe the channel guys okay this will motivate me to you know create you know content in near future upcoming trends that you see the ingenitive AI large language models I'm I've been creating a lot of contents you know mainly the projects that you can leverage language models language models or this you know generative AI you know deep fake Etc you can find multiple videos you know on my channel so please subscribe if you haven't subscribed the channel yet okay and please share the video and Channel with your friends and to peer so if you have any thoughts or feedback please let me know in the comment box okay that's all for today's video guys thank you so much for watching see you in the next one