Reflex: Write Python and Build REACT.JS Apps

hello and welcome to this very exciting video on reflex a full stack open source python framework to write your code in Python and you will get a react app that's amazing and it also uses tracker UI which is a very popular react component Library so you will see me using these components in Python like box center batch Flex image text and all that this is just amazing this Library now you can go to reflex.dev and take a look at the documentation very useful they also have this chat bot which ah it's just amazing answers your questions okay now I have created this virtual environment and activated that and I'm going to start by installing um reflex by pip install reflex and so I've installed it it was very fast for you my take a minute or so after you've installed it you need to initialize it by using this command reflex space in it one word and that's it and you will see a whole bunch of folders created for example well this is my virtual environment this one is where your code is compiled to JavaScript your python code you will see your pages all with jf's like index.js about.js whatever and after that you will see your assets that is your images could be here your CSS files are here and then here down below you have a config file which is just the name of your app and database and there this is your main folder that you'll be working with for me because this is the same name as my Parent Directory they gave it to this directory and inside that there's an init file because it's a package and the same name also has been passed down to my main python file that is for me it's a reflexproj DOT pi now if you go in there well you will see this example website which is like welcome to reflex website I'm going to remove all this later but before that in the terminal you need to run your server so run the app by this command reflex space run and it will create this localhost at 3000 for you where you can see your app and the great thing is as soon as you save your changes here in the main fold main file like by pressing for example Ctrl s you will see those changes have been applied right there so there is a fast refresh or hot reloading or whatever you want to call that you don't need to stop the server restart it or refresh the whole page here that is just amazing so I am going to um use several of the components that reflex provides and you will see all these in practice how I'm going to use them but if you want to know more please just check their website reflex.dev and they have a lot of great stuff right inside the for example components you will see that state styling database hosting and all that okay now you can see that the app is running perfect so I'm just going to refresh that for the first time and it's going to appear or something is going to appear and this is what appears so we have this welcome to reflex get started by this oops and check our dogs and you can see there is a nice theme also switcher as well all right so before starting I'm going to remove everything there is in our main python file I'm going to start from scratch by explaining what how you can make create apps the first thing you need to do is to import reflex we can optionally give it an alias of RX so that we would refer to it later as RX now every page inside our app is going to be the result or the return of a function for example let's create a function in Python Define Def and call it index which is going to be our index page right the home page like this and that is going to return something etern but return something what is it it's going to return well we are going to return a reflex component that it gets from Chakra called text and it's just a text like this is home page that's it I remember this text is exactly what chakra had with uppercase here so we are just prefixing it with RX and use small or what we call it lowercase letters so our index page is going to return only this but it is not yet a page we haven't registered it anywhere so first we are going to create an app which is going to be an instance of the RX app so it's going to be an app and that app is going to have this page added to it so we would say app dot add underscore page which page index what do I mean index it means well this index refers to this function whatever it returns will be the content of that page great now it's time to compile it so app dot compile so it's going to compile this to JavaScript now if I save this Ctrl s let's see what happens here I'm not doing anything but look this is what I got just a text now I can add some props to this text and props are properties basically like attributes you add your HTML for example so a prop could be whatever CSS style you can have for example font underscore size what is font size for this I want to have for for example I don't know 20. pixels let's save it Ctrl s and you will see this will be see a bit bigger I can have color and the color is going to be green for example let's save this again and check screen I can have a background of a blue BG equals blue you can also have background underscore color you can see that what else um I can have it as uh uh bold I think as bold yeah I think so I'm not sure if that is how it were used but let's see no this is not how it is okay oh yeah this is I think I remembered as B like that and should be bold oh yeah now this is bold so you can say I will be italic and all that so as underscore what about hover effects I can have underscore hover equals and for hover effect you need to have a dictionary because you can have several things for example upon hover I'm gonna change the color to white oops I need to have like that or upon hover I'm going to change the background to some what am I doing the background BG to um I don't know black for example let's save that one and let's go over it just look this is so cool okay so this is basically how you can use props that is these attributes to change styling okay so now we have seen this text component but this is not why reflex came to be you know imagine if I had a lot of stuff on this page am I going to include them all under this function what about another page like an about page which I'm going to create Now define an about page which is going to return something let's just call it again this one was also a text which is about page like that now let's add that page which is this function but this time maybe I don't want it to be forward slash about I want it to be forward slash about page for example so I can specify a custom route by using this about page so if someone goes to about page let's sit like that return this I'm going to save that and let's go here about so if I go to about you see nothing happens but if I say about page look about Pages returned you see because I specified it here if I had left this out if someone went to about forces about that would be it okay let's go back to our home page now I want to have several stuff here inside the home page but I don't want to write everything in one file I want to break it down to components what are components well components are things like for example this piece components are basically blocks or pieces of code that you write for some purpose for example a card can be a component so if I write one component called card then I can repeat it six times and I will have six cards what I need to change is only an icon a title and a text I don't need to write all the HTML CSS six times I only write it once I just add different titles to it so these are components so now you've just learned how to add styling to this text I'm going to remove this from index and I'm going to add a container so a container component is what it is a container just like a bootstrap container that is contains the contents to a certain limit and it adds margins to right and left so now I have a container inside the container I want to have let's say I don't know a button or a nav bar or things like that let's say nav bar for now so I'm going to create a navbar component inside our main folder I'm going to create a file a folder called components inside that folder let's create a file called navbar.pi now I have worded pi and here I am going to import reflex as RX and now I'm going to define a function I can call it whatever I call it just navbar and this function is going to return something what is it going to return well it's going to return RX dot Flex so this Flex again comes from Chakra remember here we have this Flex so I'm going to where is it I'm going to have like a flex box basically and several items here I want to have a logo here and menu here so the logo would be um RX Dot box so this is just another container I can put stuff here so inside that I'm going to have an image so RX dot image and that image has this attribute of source where do I get that image from well I don't have it yet inside my assets you can see only have this favicon so I want to use this book this image here this random image I want to put it right there you see that funny image I'm going to use that one and since it's inside the assets I don't need to specify the directory of the assets I can just say the name to Bear a book dot PNG and I can specify a width as well as props let's say I don't know 60 pixels okay that's it for the first element then comma the next box so RX dot box I'm gonna have here menu items so what I can do I can use the menu component provided by reflex why not so our extern menu and that menu is going to have a menu button so that when you click on it it opens up so RX dot menu underscore button and that button says I don't know menu for example it's also going to have a list of menu items so RX dot menu underscore items and these menu items are going to be several things so let's say RX dot menu I think menu list or menu items I don't remember so I will check so menu item the first one let's say it says about and another one says um RX slot menu underscore item this one says um I don't know posts for example let's save this and let's see if menu items works or do I get an error no I think okay apparently is fine so now I'm going to use that nav bar component inside my index page and also my about page because I'm going to have the nav bar everywhere so I'm going to use it inside this container but you can see it doesn't recognize it because it's in another directory so I should say from the dot components that is the same direct the same folder there is a folder called components inside that I have a navbar file dot Pi but I don't need to mention that and inside that I want you to import this specific function called navbar now it recognizes that let's control s save this and let's see what happens in Many Items okay so I was right menu items does not exist I think it would be manual list Maybe so let's see okay now it works look look at this that is so cool okay so we have this but of course this is a bit off what we have here we need to use a flex box to have a space between them so what I do right at the end remember this is all the items of the flex box inside of it and now we need to add another props to it called justify underscore content and this is a flexbox CSS kind of stuff uh it's going to be space Dash between so I would put a space in between these two items and it would push it all the way to the right like so isn't this amazing great now the issue is this is a bit higher maybe I want it to be at the center so what I can do I can add instead of a box I can use this Center component so now it should bring the bit down and this is on par look great but these do not go anywhere these links because they are not links so they're just menu items so what I can do instead of this menu item I can have a link component RX dot link and this link is going to be called about and where it goes is another um props called href which we kind of directs me to the about page and this posts what was it called actually the about page is this one so I don't have a post page yet so I'm not going to add anything okay so let's just save this one for now and let's see if I go here and about now about page perfect so now let's also add the navbar to the about page but I want to make sure that if someone clicks on the logo takes them to the home page so we are going to add to our logo here let's just cut this all of it and rx.link I'm going to create a link and inside that link I'm going to put the image and right after the image inside the link I'm going to create an href again which takes me to this that is a home page and that's it save this now I'm going to put this all of it actually right here instead of this homepage thing like that and save this and let's see if I go to about um yes about page you can see now if I press on this one it takes me to the home page all right so it works that is great okay now I want to add also a divider in there something that divides these two so RX dot divider is another component that we can add I'm going to add it to both of them here and you will see some very subtle kind of line you can see has been drawn here yeah that's good enough now let's create um let's create what is it kind of like a grid here so that I will have two items here when the screen is medium size or larger I'm gonna have two sections on one row and when the screen is smaller I will have only one column basically so I'm going to create another component inside our components folder I'm going to call it header dot pi and this header.pi I'm going to import reflex as RX again and let's define this header function oops so this going to return this time we're going to use our x dot responsive score grid so this responsive grid you can specify columns in there so responsive grid I'm going to use two basically boxes or let's say two centers two boxes which are centered one for introducing myself one for an image so RX Dot Center the first one Center is going to be RX dot box inside that and rx.box is going to have an RX dot heading RX oops dot heading which says I'm I'm the head and let's have another one our x dot heading which says a python developer and a button dot button which says click here something like that right so this is going to be our left box basically which is centered now let's have another one another one which I'm going to be going to Center so our x dot Center and this one is going to be an image RX dot image and that image is going to have this props of source and where a book is the same image that we use and I'm not going to give it any width now so now we haven't specified how they should be how many columns there should be so I'm just going to save this and I'm going to use it inside our index pages so when I need to import it first the number header is inside the components called header and let's have some space here and let's add it right after this divider I'm going to save it Ctrl s and you should see there is you can see one on top of each other there's one column only and the reason is that it's just well mobile first basically so it goes in one column but I can specify that I want two columns on medium size or bigger and one column on mobile size so how do I do that right after that is the last element so this is basically these two boxes after that I'm going to specify another props or columns it's a list it says on the smallest the screens go with one column and the next step would be two even if it's bigger again two if you have several columns you can say three four five that is on biggest screens five columns and all the way down but I just need two columns so I just say one and two all right now you can see we have two columns because the screen is medium now if I inspect that you can see for Mobile iPhone for example we have only one column here perfect now about the size of these two I can change the size to for example I don't know XL for this one you can change the size of headings just like that and the next one size I'm gonna say maybe small so you would see to change like so and maybe I can add a margin top to this button here so you will see how it is done margin underscore y means top and button but margin top well would be just top so let's say two rounds and let's see and now we can see there is this space there as well all right now let's make something with this um when I'm when I click on this button here I want some quotes some random quote up here how do I do that well I just enjoy this how do I do that so let's just create uh some kind of a quote here maybe I can have I don't know right inside this header yeah we can have another function so let's just um call it def call it quote for example and that quote is going to be um that quote is going to return a text and that well actually a box and let's just say a box and that box is going to have our extra text which is uh something like this quote and another text which says author something like that so I want to have a code Antics unless it's included somewhere maybe inside this header right under the button right here maybe so that's how you can include also you see we say we have a quote here and we have the author here but when I want to when I click on this here I want a code random code to be generated in these areas and the author will generate here so this brings us to the issue of State state is basically how or what you currently can do or see it's like a status quo the current status of your web page I have this text here but I want to change only this text meaning I want to change the state of this element here I want to change the state of this component here from this to some other quote from this word to another word so that has to do with controlling or managing the state of your app how do we do that how do we change the state of this from this quote to a real quote well we can do it by checking well first I think type code no type fee no what was that again typist code a quote API I don't remember honestly so let's see where it was yes I think I read it on this free code Camp oh yeah so here is the the address so I want these quotes to be inserted inside the this place how can I do that let's just copy this URL here and let's go maybe up here and let's create a state so for State we add a class you can call it whatever I'm gonna call it my state and this my state is going to inherit from or use from what the state that RX provides so in that state I would say that the quote is going to be a string and it's going to be just nothing basically so but I'm not going to use that I'm not going to use like I can use that what is it actually let's just use it like that a quote is going to be just nothing for now instead of this I'm going to give it nothing then I'm going to say there's an author there's going to be an author and that author for now is nothing but I'm going to define a function that function let's just call it get underscore quote that function is going to have self and if you know object oriented programming in a in studies methods which are basically functions inside classes you can refer to the same object as itself this function is going to grab that URL get a response from it get the Json and set that the author to this author for example or this author and set the quote which is empty to a text so I'm going to define the URL here which is this that was the URL and I'm going to send a request requests dot get URL so I'm going to send a request to this URL and as you can see I haven't um installed request Library so what that's what I'm going to do pip install requests I remember to stop the server by pressing Ctrl C and then you can do that so pip install requests it will be fast great and now let's just reflex run as well okay now up there let's import requests requests just like that yeah and now I have access to this response that I get after sending a request to this endpoint but that response is going to have a lot of stuff like a status code and a lot of other stuff but what I'm interested in is this Json so I would say data or clothes whatever is going to be equal to rest dot Json this method now data is this is equal to this awesome so my quote I want my quote to be the first quote here so I would say self dot quote that is the quote from this state this one which is now empty is going to be data the first index which is index zero and the text key which is like a dictionary so so this means exactly the first one I want to do the same but this time with author so author sell if that author is going to be equal to the first element in the data and the author key so this is the value now here okay now I have access to these two only how can I insert them inside my UI application here so down here right on this click here button I'm gonna say upon click if someone clicks so on underscore click when someone clicks oops equals okay when someone clicks on this this state should be activated which is called my state and this function inside our state which is get underscore quote should be activated you don't need to put those parentheses so upon click this should be called and when it's called it means I have access to quote and author inside the states so my state.quote would be the first quote my state that author would be the first author so now inside this text I can add mystate dot quote and instead of author I can add my state DOT author save now and let's see what happens so there is nothing because that is the state the default State empty these two are empty when I click you see this is the quote and this is the author I can simply add uh what is it where is it this one I can just add as equals B just to make this one a bit bold there so now we see it's bold so whenever I click the same thing happens why because I'm constantly sending a requests to grab the first element that is this one but what I want to do is I want to choose randomly whenever I click some random quote so I'm going to use the random module from python import random and down below right here instead of this zero I want to have a random number between 0 and whatever length this data is whatever cool there is so I would say Rand none just say random name Rand num equals random dot Rand range so give me a random number between the range of 0 and what the length of data whatever length the data has if it has 20 quotes Okay between 0 and 20. but not including 20 by the way so it means from index 0 up to an including index 19 for example and then instead of the 0 I'm going to put in random number save it Ctrl s go back and click look another one another one awesome so now we have this as well all right we have covered a lot in this video responsive grid Flex navbar menu um going to different pages by routing click events state and a lot of styling well I hope you have liked the video and I will make more videos if you want to please let me know in the comments thank you very much for watching and listening

Channel: Pythonology

Views: 17,089

Keywords: reflex, python react, reflex react, reflex python

Id: YZIKsurfMQU

Length: 36min 15sec (2175 seconds)

Published: Mon Aug 07 2023