Fullstack Flask React Tutorial - Master Flask Basics And Build A Python Flask React App | 2020 HD

[Music] hello guys welcome back to the show so in this tutorial we're going to learn about flask now flask is a micro framework for building web applications in python i know i've done a lot of tutorials on flask on this channel but i realized that i haven't done an introduction series which will take a user from not knowing anything to flask so i thought why not make a flux tutorial and then help people understand how flats work and how they can use flux to build the awesome application that they want to build now unlike django with flux you have the freedom to build your application the way that you want so you can build your own login system your own logout system any way in any format that you want so it gives you the freedom to build the application the way that you want without any restrictions to get started with flask what i'm gonna do is to show you guys how to set up so what i'm gonna do now is to go into my terminal and then create a virtual environment and install the packages that i need to use the flux micro framework now inside of this terminal what i'm going to do is to create a virtual environment for anyone out there who doesn't know what a virtual environment is a virtual environment is like creating a world and inside of that world you install all the dependencies that you need for the application that you want to build okay so that you don't pollute the dependencies on your local machine so what i'm going to do now is to create a virtual environment and in that environment in that world i will install the flux dependency that i need so in here what i'm going to say is that virtual emv dash p python 3 v emv so i'm creating a virtual environment which is called vemv now that this is done what i'm going to do is to activate this virtual environment and how you activate a virtual environment is by saying source venv which is the name of the virtual environment bin and then activate now that the virtual environment has been activated as you can see i have the vmv inside of a bracket what i'm going to do is to install the flux package so if you go onto the flux documentation which you can find the link in the video description if you click on installation if you scroll down you will see install flash and then copy this go into your terminal and then paste that in here after you've activated the virtual environment so now that i have flask installed if i do pip list as you can see i've got flask installed right here so now that i have flux installed what i'm going to do is to open this in visual studio code now that i have vs code open instead of the root of the application i'm going to create an app.pi file so i'll say touch app dot py so now that i have created the app.p white file what i need to do is to create an instance of flask if i go to the flux documentation it says that the first thing i should do is to import flask from flask so i'll save from flux import flash so i'll come over here and say from flask import flask i'm importing flask from the flux package now that flux has been imported what i need to do is to create an instance of flask so they created a variable called up and assigned to that app the instance of flask passing it the underscore underscore name which is the name of the file okay so i'll come over here and i'll say up and i'll say flask and i'll pass it underscore underscore name underscore like so so again what i did was to create an instance of the flash app and then pass it to a variable that i've called up or i've named up now if we come back to the flux documentation as you can see they've created a function called hello world which returns hello world okay so they've created a function so let's go into application and create a function as well so i'll go into the application i'll define hello world and what this function will do is to return hello world like so so this is a simple function that returns hello world now if we come back to the documentation let's talk about this app dot root this app is in the creator if you watch my last tutorial i talked about the greatest in python but we don't have to know what the creators do in order to use the app.root function okay so what i'm gonna do is to just copy what they've written over here come over here and paste that over here so i'm saying that app which is the instance of the flask app that i've created which is stored in the variable app i'm saying that the app.root if i pass it the slash url what i want you to do is to return hello world so now we've got something in the upper py now we need to run the output py to run the app.py what we can do is to say that if underscore underscore name underscore is equal to underscore underscore main underscore underscore app dot run and we will set debug to true so what is this underscore underscore name and what is this underscore underscore name what i'm saying is that if this file okay if the update file is executed directly what i want you to do is to run the app okay so if i execute this python module update pi if i execute it directly what i want you to do is to run the app so run the flag server okay so now i can go into my terminal now instead of the terminal to run the flux application what i need to do is to say python app dot py when i run python after pi i've executed the app.p white directly so what it does is that it calls the app.run function and then everything over here gets run okay so as you can see it says that the environment is set to production debug mode is on so when debug mode is on you can actually see the errors and if you push the production you need to set this debug mode to false and it says that it is running on this endpoint so i can actually go to this endpoint so if i come over here and then put this in here it says hello world now rather than returning just hello world which is a string as we have over here we can actually return proper html so instead of saying hello world what i can say is that say h1 and i can close this h1 tag save it and if i go back to the browser and i refresh as you can see we've got hello world in an h1 tag and if i inspect this it is in a h1 tag the next thing we are going to look at is how to change the environment from production to development as you saw when we run the flux app i'll go into the terminal turn off the server and you turn off the server by saying control and c control and c will turn off the server and when i've created the apto py what i'm gonna do is to export the flash amv and then set that to development so i say export flask underscore emv and i'll set that to development now if i run the application so python app dot py the environment is now development so that's all you need to know to build your first flask app in the next tutorial what we're going to look at is how to pass variables into the url and then dynamically change what we see in our view page in the last tutorial we saw how to set up flask and create your first web app in flask in today's tutorial we are going to look at how to pass variables to the urls and how to use templates in flask let's start by doing the whole process again so i'll close this instead of the terminal what i'm going to do is to create a file called vast.py now that vas.py has been created i'll go into vs code go into vas.py and then set the whole process again again i could have done it inside of the app.py file but i decided to start from scratch so that we can go over what we did the last time before you start make sure that you have activated your virtual emv so i will import flat from flask i will save from flask i'll import flask i need to create a new instance of flask so i will say app is flask and i'll pass it underscore underscore name underscore and i will say if underscore underscore name underscore is equal to underscore underscore main underscore underscore then app.run and i want to set debug to true now if i start the application and we look at what we did the last time what you realize that it is static it never changes it is hello world and it will always say hello world so what we're going to do is to allow users to pass variables into our view function and then dynamically change what we have on our view page so what i'm going to do is to create a function define greets and this greets will return for now hello if i start the application and i go to up the root so now if i start the application and i go to the slash url what i will see is just hello now we want someone to be able to come here and then type in something like chris and then have hello chris instead of just hello okay so what i'll do is to allow a user to pass in a variable into our view function to do this what i need to say is that if someone goes to the slash url and the person provides a name so i will say name and i can pass the name here as well okay so i'm saying that if someone goes to this slash url and the person provides a variable okay a variable anything that the person provides what i want to do is to pass that variable that the user provides i want to pass it to the view function and then what i'll say is that concatenate that to the hello so if i say sapon i have hello support if i say uncle i have hello huncle so we are dynamically changing what we see on the view page so now we've seen how to dynamically pass variables into the url but there is something in flats called converted so you can actually specify the type that you're expecting the user to pass in your url in this case i'm passing a name into the url so i can specify the type to be a string and how converters work is by basically coming over here and then typing in the type that you expect the user to type into the url in this case i'm expecting a string so i'll put in string if i start the server now and i type increase everything works if i type in one one works as well because one can also be a string but watch what happens when i change the type to eat i'll change the type to inch and then instead of saying one i'll pass it a name called chris i get not found that is because one can be a strength but chris can never be an eat that is the reason why we get this error and one thing to note is that you don't always have to have one view function i could basically have another view function called index and this index could just return hi with an emoji okay and i can specify that if someone goes to the slash url without providing any url variable it should return hi if i go to the views page and i type in this i get hi and if i type in slash chris i get not found but if i change this to a string i get hello chris the last thing we're going to look at is how to render templates in flask now rendering templates in flux is really really simple the first thing you need to do is to create a directory called templates directory i'll come over here and turn on the server and instead of the root of the application what i'm going to do is to create a directory called templates so mkdir template inside of this template directory i'm going to create a file called hello.html and then i'll type in html5 like so now it is important to know that flask uses ginger 2 template engine for rats automatically so we don't have to install anything if i come into the terminal and i do pip list as you can see we have ginger 2 over here that is the template engine that flux is using so we don't have to install anything else it gets installed for us when we install flask now instead of this template what i'm gonna do is to basically say hello okay so i create a h1 tag and i'll say hello like so now i can come into the vast py file and then i will say that from flux i want to import render template now that reddit template has been imported rather than saying return hi what i'm going to do is to return render template and then the name of this file okay so what i'm gonna say is that render template it says that it takes in the template name and then some context what is any other parameters or any other thing that i want to pass to the template okay so i could say that the name of the template that i would like to render is hello.html so i'll just have to pass it hello dot html like so but now if i go to the slash root it will render this html over here and let me put an emoji here as well so now if i start the server and i go to the slash root i get hello pizza so that's how templates work in flask now templates allow us to do some cool stuff when we saw the signature of the template you saw that we could pass it an additional context of type any so if i wanted to pass in any additional thing to the template what i could do is basically say that list of name and the list of names that i would like to pass to the template will be a list which contains chris a pizza emoji and ben so now i can basically use this inside of the view okay this will be automatically passed to the hello.html file rather than saying hello what i can do is to look through the list that i have so in ginger this is how we look through things so you have the curly braces the percent sign and then you say for i in the list of names and what you need to do is to end that so you say end for so you say for i which means for everything inside of the list of names and the list of names is what we passed in here i want to have a url tag i have to have an li tag and i want to pass in i and to render a variable we use two curly braces like that so now if i go to the slash url i'll have chris pizza and ben there's one more thing i want to talk about with regards to templates now if you're building a complex application you realize that most of the templates will have the same element all right we'll have a lot of things repeating so if i had an about page i would have to go into the templates file and create about dots html copy this whole thing paste that here and the only thing that i'll be changing is the body okay and maybe the title because i would like this to be about so ginger has a way of having a layout or a base html file which will be used for all the pages on your app or on your website so basically what i can do is instead of having lots of files which have the same element repeating stuff every single time what we like in software engineering is the drive principle so don't repeat yourself so what we're going to do is to create a base dot html file and instead of this base dot html file is to let the user inject whatever they want into the body and keep the rest so what i'm going to do is to have this over here and i'll say block content then i'll come over here then i'll always have to end the block so i'll say end block content like so so now if i go into the about html file instead of having all these here what i could do is to remove this and instead say extends base dot html so what i'm saying is that i need everything that is in here i'm extending the base.html file instead of my about.html file and the only thing that i would like to change is the things inside of the block content so i'll copy this i'll paste this here and i'll say block then i'll say about page and i can put this inside of a tag so i can say h1 if i go to my vars.py what i can do is to create an aboutroot and the template that i would like to render is the about.html file and let me create a hello.html file just so i don't get an error so now if i start the application i go to the slash about roots i should see about page okay if i change something in the base.html because it is being used across all the html files if i change something here instead of the body so i say hey ben and i refresh this you also see hey ben over here so the base is will be used across all the html files and the only thing i'll be changing is the things inside of the block content i hope this makes sense so that is all you need to know about templates and passing variables in the url a recap of what i did to pass variables into the url all you need to do is to specify what variable you want to pass into the url you pass that variable into your view function in this instance i created a function called greet we took in the name and then rendered the name so if i go to this last name which could be any name so i'll put in sapon i see hello cellphone so that's how you pass variables into the url to dynamically change what we see on the view page we saw how to use templates in flask we saw how to use a single template and we saw how to use a base template which can be used across all the templates that you have so in the last video we looked at how to use templates in flask in today's video we're going to learn how to use the two basic http methods in flats so get and post get is basically sending data to a client and post is basically sending data to a server so if i open the browser and i type in github and i hit enter what i just did was that i sent a get request to the server to get data whereas if i have a form and i click on submit what i'm actually doing is that i'm sending data to the server rather than getting data from the server so this is what we're going to look at today using flask and see how we can do the same thing in flask so by default if you don't specify the request method inside of your view function the request method is get request so if i import request from flask and i create a variable called request method which will be assigned to requests the method and i pass the request method to the hello.html template so i will say request method s request method okay so if i go into the hello.html file and i try to see what request method i get when i make a request to the slash url you will see that the request is get if i go into the hello.html file you can see that the request method over here is this variable that i've just passed to it okay so the request method is basically this so if i start the server and i go to this url it says hello and the request method is get so we know that by default the request method is get but you can also specify the request method if you want you can be explicit which is what i tend to do and the way that you do that is basically by going into your update root the creator so my update wrote the creator and passing it the request method that you would like the view function to accept so in this case we would like you to accept just get so if i come over here and i can pass it methods and it will be a list of methods and the method that i want to pass it is get so you can explicitly declare that the method that you want to pass or you want this view function to accept is a get method so if i come over here and i hit enter it still works you can also pass it more than one method so you can pass it i get method and i can't pass it puts method as well so i could say gets and post that is if i want this function or if i want this view function to accept a get request and put requests at the same time we will come to that later on so the question that i'm asking myself is that what if i decide to remove the get method and tell this view function that the method that it accepts is just pushed if i try to make a get request to the slash uil what will happen well let's see what happens when i make a get request to that slash url i get method not allowed because the method that i'm telling this latch url to take is just a post request now let's look at how we can use post request in flask the way that we're going to use the post request is basically send data to the server in order to send data to the server i need to create a form so inside of the hello.hcmark file what i'm going to do is to create a form okay so i'm gonna create a form and in this form i'll create two input fields one for first name and one for last name and the last thing that i'll do is to create an input field which will be of type submit and what i'll do is to say the method is a post and then when i submit the form where do i want the information to go the information that i put in the input field where do i want that information to go well instead of the app.p file i'll specify that this last route also takes in a post request so i will say that send the information to slash okay so i'll come over here and i'll specify the action to be slash like so so now if i go to the slash url i see first name last name and submit now when i click on submit you realize that the change to post because the request method is now post because i submitted to that url now let's pass in data into the input field and let's see how we can handle that data in our view function so if i come over here let me just print out what gets locked in the terminal when i submit something the data that gets logged so that we can find a way to retrieve that data so i will say that if the request the method the request method is posts what i would like to do is to print the request dot form then let me put something around it so that we know what is being logged in the terminal i'm also going to create a function called name and i'll redirect to that name if a form is submitted so i'll define a function call name and i will say return right now what i'll return is just name okay and then if a request method is post what i would like to do is to redirect to this name url so i need to pass it up the root and i'll give it slash name so in order to redirect i need to import redirect from flask so i'll say redirect and i need to import url4 so that i can redirect to that url so i'm saying that if the request method is post what i would like you to do is to return redirect url for this view function so name all i've done is that i'm saying that if the request method is post so if i click on the submit button what i would like to do is to print out or print in the terminal the request.form which will print out the data that was input by the user in the form and i would like to redirect to the url for name which means redirect to these roots so now if i start the server everything is working i put in sap on and i put in chris and i click submit it says url for name string so if i start the thing again and i put in cell phone and i put in chris and i click on submit it redirects me to the name so slash name but let's see what gets printed out in the terminal so in the terminal as you can see i've got an immutable dict which means an immutable dictionary which has first name set to sapphone and the last name set to chris and i'm sure you're wondering where this first name and last name are coming from so if i go back to the form the name of the input field which takes the name which takes the first name it's called first name and the name of the input field which takes the last name is called last name so those are the keys and the value is basically what the user inputs inside of the form so now let's find a way to retrieve this we know that it is a dictionary so what we can say is that if the request method is post i will go ahead and retrieve the first name so i'll say user will be request dot form and request the form returns a dictionary and we want the first name so i can get the first name which is basically this so let me make this first name instead of user so the first name will be request of form and i'm extracting the first name from the dictionary and what i can do is that instead of saying slash name what i can do is to pass to this root the name that i get from here so i can specify slash and i can say string and i can say first name and i can specify the first name here as well like so so now i can say url for name and i can pass it the first name to be this first name so now if i go to the slash url and i submit something so on the slash url if i put in cell phone and i put in chris then i click on submit as you can see i have cell phone here so basically that's how we use the http method in flask so what we've seen is how to use the http method gets and how to use http method post we've seen that get is used to get something from the client or something from the server and then http post is used to send data to the server in the last video tutorial we saw how to use http methods in flask so get and post and today's video we're going to look how to use web forms in flask to use web forms in flats what we're going to do is to use something called wt forms so i'll go ahead and install wt forms using the pip install fluxwt forms make sure you have your virtual environment activated so that you don't pollute the namespace of your environment so i'll go ahead and say pip install wt forms okay now that this is done i'll go ahead and create a file called forms.py instead of the roots of my application so i'll say touch forms dot py since we are working with web forms in flask the first thing we need to do is to specify a secret key inside of the application config so i'll go ahead and say app.config secret key and i'll assign the secret key to any key that i want so the value for the secret key is password now the secret key is something that flux uses to protect your web form against nasty attack called cross site request forgery or csrf okay so that when people attack your thing flux uses that secret key to protect your um your application and i don't want to get too much into details because that is not needed you can get into details and find out more about the secret key once you start using flats and get better at it but for now know that the secret key is something that flatsca uses to protect your workform against nasty attack by hakkis so now that the secret key has been defined i can go into the form and then create a form that i want so the flux wtf extension uses python classes to represent what form a form class simply defines the fields of the form as class variables okay so the fields of the form will be class variables so the first thing i need to do is to say that from flask wtf imports flux form the next thing that i need to do is to import the fields that i need and the fields can be imported from wt forms it is important to know that you can import lots of fields from wt forms perhaps feels like boolean fields date fields file fails it has a lot of fields so if you check the wt forms documentation you find all the fields that you can import from wt forms what i'm going to use is the text area field so i'll go back to the code and i'll say from wt forms import our import test area field so as i mentioned earlier the flux wtf extension uses python classes to represent word forms so i will define a class called to do so say class to do and this class will inherit from the flux form okay so i'll pass in the flux form because it needs to inherit from the flux form and what i would specify is the content so i'll say content which will be a class variable and the content will be the text area field and with the test area field you can give it lots of options you can give it a label you can give it the validated fill tests and lots more and i'm going to give it the validator which will say that data is required so you cannot basically leave the form empty and i need to import that from wt forms so i'll say from wt forms validators import data required like so okay so now i have data required what i need to do is to specify that the validators will be a list we can pass the list of validators the validator that i would like to pass it is data required so i'll say data required like so the lesson i'm gonna do is to give it a submit field okay so i'll say submit and this submit will be a submit field so i need to import submit field from the beauty forms and i'll say submit field and i will say submit to do and that is it for the forms and all i did was to create a class and specify some class variables this is because the fluxwtf extension uses python classes to represent web forms and a form class simply defines fields of the form as class variables so i imported from wtf i imported the flux form and then from wtf forms are imported the text area field and submit field because those are the fields that i want my form to have and i imported just one validator which is the data required for the data so now the question is how do i use this form instead of my view function well that is simple what i can do is to import the form into the app dot py file so i'll save from forms import and import to do and i'll define a simple view function called to do so i'll say depth to do and for now say up the roots slash to do that will be the endpoint and the method if you don't specify is a get method but i would like to be explicit and i'll say methods and i'll set the method to get the way to use this form is that i need to create an instance of the form because the form is a class since i have the form imported over here what i can say is to do form or be an instance of to do and i can pass this to the template so i'll say return render template and i need to create a template so i will say to do dot html inside of the templates this was 10 block content now i can go back to the app and i'll say return render templates the html file that i want to render will be the to-do.html file so i'll say to do html and then the form can be passed as contest because i can pass lots of contests anything to put and i'll pass the to do form to it so i'll save form and the form will be this to do for now that i've passed the form to the template i can now extract the form inside of my html file and basically use the form so the way that the form is used is basically specifying a form i will not specify the action yet but i will specify the method to be post and this form will have something called form dot hidden tag now you remember that we set the secret key here inside of the application so we need to use that secret key inside of the form and again the secret key is used by flux to provide security to our form and it helps to protect the form from nasty attacks so i'll say form dot hidden underscore like so so what this form.heading tag template argument is doing is that it generates a hidden field that includes a talking that is used to protect the form against csrf attack now all we need to do is to provide a secret key variable which is defined inside of the application config which we've done over here and then flux will take care of the rest flux will take care we'll use this form.hidden tab to protect the form and that's all you need to know for now then i can come over here since i have access to the form and i'll say form dot content like so and i'll say form.submit so now if i start the application and i go to slash to do what i have is a form with a submit button which says to do so that's how you use flat forms now that we know how to render the form in our view template we need to see how to get data from the form so if i say my name is the show what i want to do is that when i submit i need to be able to receive data from the form so what i can do is to go into my view function the method that this function is expecting is a get method but i would like to post this method as well so i need to specify the method the post method inside of the approve the creator so i'll say post here as well and then i need to tell my to do the html file that the action should be posted to slash to do now i do not have a database to store what the user types so what i'm going to do is to just print in the console the data that we get from the form to do this what i'm going to use is the validate on submit function which the form has so i will say if to do for the validate on submit what i would like to do is to print the to-do form the content the data which is the data that the user puts in this field i'm saying that if the form validates on submits if the form successfully validates print the data the user puts in the field and then return redirect to the slash url so all i've done is i specified the request method post on the to-do view function inside of the to do the html i specify that the action should go to the slash to do then i'm using the validate on submit function which processes the data that the user puts inside of the field and i'm just redirecting to the slash root so now if i go to the browser then i type in my name is the show and i click on submit if i check the terminal as you can see my name is the show so that's how forms work in flask so the last video tutorial we saw how to use flux wt forms so we make this but as you can see if i type in my name is the show and i click on submit to do the data that i put inside of the field is not persistent i'm not able to store the data the data just goes it gets locked in the terminal but that's not what we want when you're trying to build a complex application you would like to have the ability to store the data that you put inside your field and then use it for something else later on in the application so in today's video we're going to look at databases in flask to help us with persisting data we'll be using the flask sql outcome extension and the flash sql archive station provides flask friendly wrapper to the popular sql academy package which is an object relational mapper or ms allow us to manage databases using high level entities such as classes and that's exactly what we're going to do so what i'm going to do is basically install sql alchemy and i will use pip install flash sql academy so i'll go to the flash sql archive documentation copy this got my virtual environment activated so i'll do pip install plus sql alchemy as i mentioned earlier flash sql artemy allows us to manage databases using classes so what i need to do is to create a class which will be my module so what a model does is that the model will represent the data that will be stored in the database so a model is basically a representation of what we want to store in the database but before i can even create a model what i need to do is to create a database uri and store that database uri into our application config so if i go to the sql account documentation as you can see on this line it says app.config sql archimede database and then the database uri is sql academy tempt slash tests dot db so i'll just copy this go into the application and then paste this over here but as you can see right it says that it is stored in a folder or directory called temp so i need to create a directory in here called temp so i'll come over here and i'll say mkdira tmp and inside of this directory is where the text.db file will be stored so now that i've set the sql archimede database uri to this what i now need to do is to create the module so i'll create class to do module so i've created a class called to do module and this to do module needs to inherit from the db.module but i haven't created a db over here if i go to the documentation again as you saw you need to create an instance of sql alchemy and passed your application to it okay so what i need to do is to copy this and what this is saying is that i want to import from flash sql alchemy i want to import sql archiving so now i can create the db and create an instance of sql alchemy and then pass it up to it so i will say db will be this and i'll pass the app to it now i can pass db the model to the to-do module just like the to-do form which had the field as class variables we would do the same thing for their to-do model so inside of the to-do model what i'm going to do is to specify the id of the model and the id will be db dot column and then i'll set the id to be the primary key okay so i'll say db dot integer and then i will say that the primary key is true now the second field that i would like to store is what the user inputs in the field so over here i'll create a field with the name content which i've assigned db.column db.string 240 so i'm saying that the characters that it will store is 240 characters i'll create a underscore underscore str underscore so that when i go to the terminal i can see the string representation of this model okay so i'll say that def underscore underscore str underscore underscore i'll pass itself and what i would like to return is basically self.content and then the id will be self.id this will return the strong representation of the model now if you look in here this tmp directory is empty but watch what happens when i initialize the database inside of the terminal what i'm going to do is to type in python and what i need to do is that i need to import this db from the app.py file and after i've imported db um i need to initialize the database and basically create you know the model that i want to create so what i will say is that from up import db okay so i need to now create the database if i say for i in the db print i you can see db has got something called crate o which is a method that we will use to initialize the database okay so i'll come over here db dot create all now what this did is that this created a file called test.db inside of my temp directory which is this directory that i have over here so what i've done is that i've initialized the database the next thing i need to do is to import the module because i want to create an instance of the model again what i said was that the model is a representation of the data that i want to store in the database so i need to import the model and then use that for something now that i've imported this i can go on and create an instance of the to-do model and pass in the fields that i want so i will say to do and to do will be to do model the id field is automatically generated by flask and what i need to provide is the content field so i will say content and i'll say content to be i want to eat like so so basically what i've done is that i've created an instance of the to do model and i've passed it you know a field that i want which is content now what i need to do is to add the to-do to the database because of imported db i can say dv dot session dot add to do like so so i've added to do but this doesn't mean that it has persisted in the database no what it means is that i've added it so in order for it to persist or in order for it to be saved into the database what i need to say is that db.session.com and now i have it saved in the database so now if i say to do i should get okay so there is something definitely wrong because of the way that this is displaying in the strength representation i said i wanted the content and the id but it is giving me the model and the id so let's check the class and let's see if i did everything correctly so you can see i'm doing something wrong over here so this has to be like this this has to be like that so i have self.content and then i've got self.id so let's do the whole process again and then we can get the string representation of the model so now if i say that to use it's equal to to-do model dot query the filter by id one dot first and i say give me to do's or id i get id one if i say to douche dot content i get i want to eat so basically i've been able to save into the database and the database has got a lot of sql commands that you can use um you can have a look at the sql academy database to learn more about the commands that you can use you can basically auto buy something you can delete you can get there's a lot that you can do so take your time and have a look at the sql alchemy documentation have a look at it and then see how this is done so if i go back into application let's see how we can get the data from the form and save it in our application rather than do it in a terminal so now what i can do is that instead of printing what the user types in the input field instead of printing that in the terminal i can actually save that in the database and then use it somewhere else in our application to do that what i need to do is to create like you saw in the terminal is to create an instance of the model and then store the content in the content field so what i'll do is basically say that if the application validates on submits what i want you to do is to create an instance of the database so i will say that to do model will be to do and then the content will be there to do form content.data like so i will remove this and all i need to say now is dv dot session dot add i want to add to do so i want to add this and then db the session dot comment to actually save that inside of the database now when that is saved in the database i get redirected to the slash url this page over here so basically what i can do is to query the database get all the data that has been stored inside of it and basically show that on the page how you do that is basically by saying to do is the to do model dot query dot or which will query the database and give me everything that has been stored inside of it so now i can pass this to do as to do will be to do so i can go into the hello.html file and i'll have access to this to do so if i go into the hello.html template i'll put a hr tag over here and what i will say is that for i in to do and as you saw in the tutorial i need to end for what i want you to do is to give me the data so what i can say is that give me i dot content like so so if i now start the server and then type in something now when i submit this i get all this work over here so the data has been stored in the database and now i have it here if i do that same thing again and i'll say yes this is working and click submit to do i have yes this is working so that is how we use databases in flask so the process of creating a database is basically creating a model the model is the representation of the data that you want to store in your database once the module has been created you need to give it the database uri store that database uri inside of your application config and this could be the uri for anything so it could be pskwell it could be sql alchemy it could be mysql it could be any database that you want okay you just have to read the documentation and get the uri that you need for that database once that is done you need to go into your terminal initialize your database to get to your database file and basically use it as you please in the last video tutorial we saw how to use databases in flask in today's video we're going to learn how to use flask as a rest api for a react.js front-end so we go on to build this simple application which is a to-do list application which uses react.js and react routers we will be able to add it to a to-do list we'll be able to click to get the details of one to do we'll be able to delete and we'll be able to edit as well then lastly we will use react spring to animate the to-do list this will be done using flux react.js and react routers let's get into it the first thing i need to do is to create the react.js application and i can do that using yarn create react up my app so now that this is completed what i can do is to cd into my app and then instead of the root of the application what i'll do is to create a directory called api now i'll cd into api and i'll create a virtual environment by saying virtual env p python 3 v e mv if i'm going too quick for you then you should check out the tutorial on how to connect a flux back end to a react.js front end now that this is done what i'll do is to activate the virtual environment and then once the virtual environment has been activated what i need to do is to install flask so i'll come here and copy this pip install flask and i'll do pip install flask now that flux has been installed what i need to do is to create an api.py file inside of the root of my application so i'll say touch api.py then i can open this file now the first thing i will do is to import flats from flask so say from flask import flask i'm not going to explain into details how this is done because i've already done a tutorial on that so if you don't understand watch the flux tutorial before getting into this so i'll go on and instantiate the flux application so say app now that the app has been instantiated i will say that if underscore underscore name underscore is equal to underscore underscore main underscore the up dot run and i'll set d bar to true the next thing i'm going to do is to create a view function called index so i'll say up the root slash methods get and if someone goes to the index for now what i want to return is hello world just to be able to connect the flux to the react application and then i can go on and write the field function that i really need so i'll say return and that's all i need for my view function for now i'll go on and create a dot emv file and in this dot emv file i'll put in my environment conflict so i'll come to the python.tmv documentation copy this go to the terminal and make sure that the virtual emv has been activated and what i'll say is pip install python.tmv i will then go on to say touch dot emv inside of this dot emv file what i will say is that the flux emv is development let me now start the flux application and make sure that it is working so i can go to this url and actually do have hello world so now i'll go to the front end and connect the front end to the back end to do this what i'll do is to go into the react application go into my packet.json and create a proxy so i will say proxy and i'll set the proxy to the flat url so i'll copy this come over here and then paste that here like so so now i've set the flux url as a proxy to the react.js application now the next thing i'll do is to create a component inside of my source directory so i'll say components and instead of this component what i'll do is to create a components directory called card so i'll say dash inside of this card i'll create a card.js file now what i'll do is to import react from react i'll say import react from react then i'll create a component chord card and this will be a functional component which for now returns a div which says hello then i need to export this the next thing i'll do is to create a directory called pages so the pages is where i'll bring all my components together to create the page that i want on my website if you don't understand how i structure my react applications check out the tutorial on how to structure react applications like a pro so i'll come over here and i'll create pages and instead of these pages what i'll do is to create a new file called to do page.js and i'll import react from react so i'll save import react from react then i'll also import this card from the card component so i'll say import card from components the next thing i'll do is to create the to do page components or say const to do page which will be a functional component and this functional component will just render the card okay so i'll say return it's a react fragment then i'll pass in card like so and lastly i'll export this and then pass this to the app.js so i'll go into the app.js file get rid of everything here and then i will import to do page so this page from pages slash to do page and what i can do is to pass this here like so so now if i start the application i should see hello okay so i'll go on and start the react application so as you can see it says hello now i know that the front end is working properly so i can go on and make a fetch request to the back end and see if i can get the data from the back end and use it on the front end so i can go into the react application and then on the to do page what i'll do is to import use state and use effect from react so i've now imported use state and use effect from react so i can go on and create a state so i'll say const to do and then it's set to do and this will be used which is initially an empty array like so and i can go on and say use effect and what i'll say is that we use effect is that i want to fetch from slash api now since we're using the flux application as a rest api i need to change the routes on the backend to slash api so i'll come back here and instead of saying slash i'll say slash api like so then i'll go back to the front end and i'll save fetch slash api content response the response but okay i want you to return response to json to then data for now i want you to console the log the data like so so what i'm actually doing is that i'm fetching data from the slash api endpoint and if the response is okay i just want to constantly lock the data just to see that the back end has been connected with the front end correctly and everything is working before i go on to add complexity to it so i'll start the reactant flux server and see if everything is working correctly and over here make sure you add an array so that you make one request else you end up making a lot of requests so now this is done let's see what i get in the console and as you can see i get an object called hello so it means that the back end has been connected correctly with the front end and if you don't agree if i come over here and return as list of names so orange and then apple and now get an array of orange and apple so i know that everything is working correctly so this is how you connect your react.js front end to your flux application the next thing we are going to do is actually create the route that will enable us to create the rest api in order to persist data we need a database so when someone goes to the application on the front and type in into a field we need to be able to store that in a database in the back end so what i'm going to do is to install flash sql icon so i'll copy this i have my virtual emv activated so i'll say pip install flash sql like me again if you don't know what flash sql alchemy is check out the tutorial on how to use databases in flask so now that this is done i'll come down here and i'll set inside of my application config the sql account database uri i'll change this to db so the next thing i'm going to do is to import sql alchemy so i'll say from flask sql alchemy import sql academy like so so what i've done is to set the sql alchemy database uri in my application config and i've imported sql alchemy from flash sql academy the next thing i need to do is to create a model if you saw in the tutorial on how to use databases in flats you need to create a class which is a model and that class will be the representation of the data that you want to store in the database if you don't understand this make sure you check that out before watching this one so what i'll do is to create an instance of sql alchemy so i'll say db will be sql alchemy like so and i need to pass it the app okay the app is currently none so i need to pass it this up so i'll pass this up and now what i can do is to create a model so how you create a model is basically by saying class i'll call this to do and this class will inherit from db.module so i'll say db the module and it will have two class variables one is id and this id will be db.column db.integer because i want the id to be an integer field and then i'll set the primary key to true the next thing i would like to store is the content field so what the user puts in the input field so i'll create a field called content and this content will be db.column so i'll copy this paste that here and i'll change this db.integer to db.text and i'll set nullable to false which means it cannot be empty the last now do is to create the underscore underscore str underscore so that i can get the string representation of this model so i'll pass in self and what i want to return is self dot id and then self dot content so this underscore underscore exterior underscore will give me the string representation of this model now that i have the database model created what i need to do is to initialize my database so i'll go into the terminal and type in python and what i'll say is that from api import db and then i'll say db dot create underscore o like so and what this command does is that it created this example.db which is basically this okay the next thing i'll do is to import the module so i'll say from api import to do and i will create an instance of this model and basically see the database with some content okay so i'll say to do is basically to do and the content that i would like to give it is basically i need to eat then i'm going to add this so i'm saying db session the add to do then i'm going to actually persist this or save this so say dot db.session.com if you don't understand how this is done again check out the tutorial on how to use databases in flash so i do have some data in my database now i'll exit actually let me add one more data into the database so i'll say second to do it's another to do i'll say content i need to learn flask and i'll say db the session add second to do then i'll say db the session dot commit like so so i can exit from here what i want the index function to do is that when someone goes to slash api what i want to do is to query the data in the database so i want to get everything that has been stored in the database and then display that on the front end that is basically what i want my index function to do now i would like to show you guys something what some people will tend to do was that they would create a variable called to do and what they would say is that to do dot query or and they will assume that this will return everything that has been stored in the database and then what they can say is that return a dictionary of to do now if i start the application you realize that i'll get an error let's see what this error is i get this error saying that object of type to do is not json serializable so what i need to do now is to serialize the object so in order to avoid this error what i will do is to create a to do serializer so i'll come over here and create a method called to do serializer and what this to do serializer will do is that it will take you to do and then it will return an object with an id key and the value will be set to to do that id and then it will have a content key and this content key will be set to to do dot content like so so instead of returning an object with a key name and the value to do what i'll do is to import jsonify from flask and instead return jsonify which is used to convert something into json and i want to jsonify the map and as you know the map takes in the function and an iterable so what i'll do is to pass in the function and the function will be the to do serializer and the iterable will be d2do.query.org so this so now i can get rid of this and what i need to do is that whatever is returned by the map i would like to unpack that okay i would like to unpack that into this array so i need to add a start over here and i will unpack that so basically now if i stack the flux application then i go to slash api i now have a list which contains two objects so what the style was doing was that i was unpacking the objects into the array i hope this makes sense so now that we have some data in the database rather than saying console the log data what i'm going to do is to actually set the data to the data that we get from the database so what i'm gonna do is to say set to do then i'll pass it data like so so now i can go into this card component and then use the data okay so what i'll do is to pass to the card component a prop call list of to-do's so i'll say a list of to-do's and this list of to-do's will be there to do state so i'll pass it this i can now go into the card.js file and then extract the list dot to do so i can extract this from here and rather than returning just hello what i'm going to do is to look through the list of to-do's so i'll say list.to-do's.map and each to do what i would like to do is to return a ul tag and this ul tag will contain an li tag and this li tag will have to do dot content like so so if i check the front end of the application as you can see i have i need to eat and i need to learn flask but then if i inspect the console as you can see i've got some errors because i need to provide the key so what i'll do is to come over here and then pass it a key prop with the id to be to do the id now this arrow should be gone so we know that everything has been integrated well and everything is working the next step will be to create the form component which will allow the user to input data and that data will then be stored in the database let's see how this is done to create a form instead of my components directory i'll create a directory called form and inside of this form directory i'll create a form.js file then i'll go on to say import react from react then i'll create a component called form which is a functional component and what this functional component will do is that it will return fragment and this fragment will contain a form which has two input field one is a test input field and one is a submit field the next thing i will do is to make sure that the user puts something inside of the input field so i'll set required yeah now what i'll do is to export the form and then i'll import the form inside of my to do page so inside of the to-do page what i'll do is to copy this and change this to form and components this has to be form and then i'll render the phone components right here so now if i check the browser i should have a form and the list of to-do's but as you can see i'm not able to track whatever i type in here and that needs to change and what i'll do is to set some state inside of my to-do page so i will come over here and i'll say cost add to do and i'll create something called set add to do and these will be states so use state which is initially an empty string and the next thing i'm going to do is to pass these states as a prop to the form so inside of the form component what i'll pass is called the user input and i'll set the user input to the add to do then i can go into the form component and then extract the user input so i'll copy this then i'll paste this here and what i will do now is to basically set the value of the input field to the user input state which is initially an empty string right now when i type in something it doesn't work because i've set the state of this input field to an empty string if i come over here and i put in chris this will change to chris because that is the state that is what the in the value of the input field is so now i need to be able to track what the user types in the input field and set that to the state so in the form component i'll create an unchange prop so on change and i'll set this on change prop to something called handle change so say handle change now as you can see i've got nothing called handle change over here okay so what i'll do is to create a function called handle change so instead of my form component i'll create a constant called handle change and this will take in an event for now i'll console.log event.target.value so i'll say console log event dot target dot value but what i actually want to happen is that when someone changes something in this input field i want to set the state to what the person has typed in here so instead of my to-do page what i will do is to create a function called handle form change so i create a constant called handle for change and this will be a function so it will set this to whatever the user types okay so this will take in an input value then i'll set out to do to that input value and so i'll change the states of this so now i need to pass this handle form change to the form component so what i'll do is to create a prop call on form chain and i'll assign this on form change to this handle form change then i can go into my form components so i'll copy this then i will extract this from here so now instead of saying console.log event.target.value what i would do is to say on form change event.target.value so now let's see what happens when i change something in the input field and before i do that i need to set this back to an empty string so that i will have the field empty now if i type in something here it's still not working let's see something so inspect and as you can see there's an error so i might have spelled something wrongly so i'll go back into vs code and then change this to unchanged so it's a capital c now i'll go back to the browser so now if i type in something here it works okay and i can actually console the log that so console the log i had to do so which is actually the state so so now if i change something in the input field as you can see i get those logged over here so we know that we are able to track the state and what the user types in over here now let's find a way to handle submit now to handle submit i'll do something similar so i'll come into the form.js file and instead of the form.js file what i'll do is to create a function called handle submit so i'll say cost handle submit and what this handle submits will do is that it will take in an event and i'll say event prevent default which will stop it from posting so submitting on the form i'll create a prop call on submit and i'll assign to this on submit prop handle submit like so so currently if i say i want to sleep and i click on submit nothing happens but what i actually want to happen is that i want to send this data to the flag server and install that in the database so in order to do that when i click on submit what i need to actually do is to send the post requests to the server and then store the data in the database so what i will do is basically go into the to-do page and then create a function that will do this for me okay so i will say handle form submit and this will be a function that will fetch to slash api slash and i know i haven't created this endpoint but i'll call this endpoint create because i want to use this endpoint to create a new to do okay and the method that i will specify is a post method so i'll say method and i'll set the method to post then i'll set the body the key to be jason the stringify so json.stringify is used to convert the body into json and i'll say content then i'll set the content to basically that i had to do so what i'm saying is that when a user types in something here and the person clicks on submit get the data that the person types in here and then send that data to slash api create and what i will do is that i'll pass this as a prop to the form so i'll go to the form then i'll say on form submit and i'll pass it the handle form submit i'll come over here extract that and then when someone submits the application what i want to do is to call this method so i haven't actually created this endpoint so what i would do is to go into the flux application and create this endpoint so now instead of the flux application what i'll do is to create a method called create so def create and it has to be at app slash api create then i'll set the methods to post the next thing i'll do is that i'll create a variable called request data and the request data will be the data that i get from the request so i need to import request from flask so the request data will be request.data and that will basically give me what the user puts in here it will give me the body of the request okay that is the request data and what i need to do is to convert the request data into a python dictionary so what i'll do is to import json from flask so i'll say json then i'll convert this to a python dictionary by saying json the loads request data now that i've converted this to a python dictionary what i'll do is to say that to do is the instance of to do so is the instance of this to do module the content will be the request data and i want to extract the content field from the request data so i'll say content like so the next thing i'll do is to add this to the session so i'll say db session dot add to do then i will say db.session.com like so and then what i actually want to happen is that when the db is committed i want to return a dictionary with a key 201 which means it has been created and then a message saying to do create it successfully like so now if i go back to the react application inside of the to do page what i can actually do is to set the headers and then handle the response so what i'll do is that here i will say headers which would be a javascript object or the content now set the content type to application slides json charset will be utf 8 but then what i want to happen is i want to get the response return the response to json i need to get rid of this but then the message will be console the log message for now so the message will actually be this so what is actually being returned when i post to these slash api slash script roots so now let's see what happens if this is actually created and then we can go on and build on top of it so now if i come to the browser then i inspect then i say i need to shower and i click submit it says handle submit it's not a function so let's see what is happening and then we can fix that okay so i passed handle submit over here instead of on form submit so what i will do is to copy this go to the form then change this to conform submit then change that to on form submit like so now let's try again so now if i say i need to then pattern and i click on submit it says response to json it's not a function so let's see what's happening again okay so it's json like so and as you can see i have i need to learn python here so now you say i need to sleep and i click on submit i get to do creators successfully okay but as you can see this is not cleared when i click on submit so now let's make a change so that this is cleared when i submit to do this what i'm going to say is that console.log the message and then i'll set the set add to do to an empty strength so i will say set out to do and i'll set this to an empty string like so so now let's try again if i say i need to learn java it is cleared now so now we know that everything is working but as you can see if i type in i need to sync then i click on submit the front end is not updated immediately i always have to refresh this to make this happen so what i need to do now is that when i submit something i need to make a fetch request to the back end again and get the latest to do so how i do that is basically by saying cons to get latest to douche which should also be a function and i'll fetch from slash api but then response if response dot okay return response dot json then the data will be set to do then i'll pass it the data like so so now if i go back to the browser then i say i need to and i click submit it gets updated immediately now let me get rid of these bullet points and i can do that by saying inside of my app.css what i'm going to do is to set the list style type to none so currently on the main page i have a list of to do but i cannot click on them okay i do not have a page that shows just one single to do so what i'll do is to go back to the flux application and create a show root that will give me each to do so inside of the flux application i'll create another function called show and this show will take an id and i'll say at app root slash api slash inc id when someone goes to the slash api slash an id what i want you to do is to create the database so i will say return just certify i will unpack the map then i'll pass it d to do serializer and what i would do is to say that to do the query the filter and i want to filter by id and the id will be the id that is sent in the get request so basically if someone goes to slash api with an id what i want to do is to query the database and filter by that id and return that thing now to use this on the front end i need to be able to click on it to do in order to go to that to do so i will have to install react routers so to install react routers i'll come over here and i'll copy this yarn out react router and instead of the root of the react application where i've got the packet.json i'll say yarn add react router and since we are building a web app what we also need to do is to install react router door so i'll come over here and i'll say yarn add react router dom so now that react router has been installed what i'll do is to go into my application and then inside of my app.js file i need to import some things from react router dom so i'll come over here then i'll copy this go into the application then i'll paste that here so what i've done is that i've imported browser router switch roots and link from react router door so now instead of just returning a div with the to to-do page component what i will do is that i will wrap this inside of air router so what i'll say is the router and inside of this router i'll have a switch which is basically this okay so the router is this and i'll have a switch which is that so what a switch does is that a switch looks through its children routes and renders the first one that matches the current url so basically that's what a switch does and inside of this switch i'll have a route and this route i'll specify a path and i'm telling react that if the path is slash what i want you to do is to render the to do page like so so now i can get rid of this and i'll copy this whole thing and i'll put this whole thing inside of the div like so so now if i come over here and i say slash about as you can see i still get this page because the exact match that i think i'm fine is the slash and the slash results to the to-do page okay the next thing i'm going to do is to create a show page which will enable me to do something like slash one and then i can get one to do so to build the show page what i'll do is to come over here and instead of my pages what i'm going to create is a show page file so i'll say show the js now inside of this show page what i need to do is to import react from react then i'll create a functional component called show and what this component will do is that it will have some state okay so i have cost to do then i have set to do and the state would be you state so what i actually want to happen is that if a person comes over here and a person clicks on i need to eat i want to make a fetch request to the flux server and then get the data for this to do okay so what i need to do is that inside of the show page i need to import use stage and then use effect from react and then i will say the use effect which takes in a function and i'll say that if someone clicks on each to do what i want you to do is to fetch from slash api slash an id that i will provide you okay and i need to define this id now i can only get this id from the url and react router comes with something called use params so react router comes with a hook called use params okay and this use params will enable me to get something from the url so i'm going to use use paragrams to get the id from the url so to use use programs what i'll do is to copy this come over here and then get rid of all of that because i don't really need them and then what i can say is that const id because the use paragrams is an object so i'm extracting the id from that object will be used params so now i have the id okay so i'm making the fetch request to slash api slash with the id and that will obviously make a request to this endpoint so it will make a request to this endpoint then i'm saying that then response i want the response the json the then data i want is set to do so this and i want to set that to the data that i get and then what i will say is that if the id changes i want you to make a new request okay so if this id changes what i want you to do is i want to make a new request and get me a new data and what i would like to return is basically a div and i'll say to do dot length if it's greater than zero then what i want you to do is to map so i'll say to do dot map the data and i want to div with the data but content like so so now i can export this and then i can use that inside of my app.js file so i'll go into the app.js file and what i need to do is to import the show page so i'll say import pages and show like so the next step will be to wrap this in the root so i'll copy this paste that here and instead of saying to do page i'll say show like so and then now the path will be slash with something called id okay because i need to pass an id to this url so it is no longer slash it is slash with an id now let's see how this works if i go to the browser everything is working and i type in slash one see what happens it doesn't work because will match the first thing that matches the slash and the first thing that matches the slash is the route to slash so to stop this from happening what i need to do is to pass the route to the slash url and exact prop like so and now i can try again now i get i need to eat and if i put in slash four i get i need to sleep and if i put in slash two i get i need to learn flats so what is exactly happening in the show page now as you can see i passed in a number one if i hit enter it changes if i put in four it changes so basically this number is the id okay so this number is a graph from the url and it is passed as a parameter to the slash api endpoint and then i get the data for that and once that id changes i make another fetch request and i use the data to populate the div so that is basically what's happening inside of the show page i still cannot click on these to do so what i need to do is to make these a link and when i click on i need to eat i will be redirected to slash one which is i need to eat to do this i'll use link from react ratadon so i'll go into my card components and instead of this card component what i'll do is that i'll import link and inside of the card rather than saying an li tag of to do the component what i'll do is to wrap this inside of a link okay so i'll have the li tag and i'll also have a link so i'll say link then since to get to the show page so if i go to the app.js file in order to get to the show page i need to pass it an id okay i need to pass it an id what i will do is to pass this an id and that can be passed with the two prop and i can specify this to be to do dot id like so so now if i go back to the browser and i go to slash these are all links so if i click on this i get taken to i need to eat if i click back and i click on this i get taken to i need to learn flask if i go back and i click on this i get taken to i need to sleep the next thing i'm going to do is to build in the ability for users to delete a to-do so in order to do that what i'll do is to come into my app.py file and what i'll say is that at up the root slash api with the number which i will specify as id the method should be post then i will define this method to be delete and it will take in that id that i pass here and when i get the id what i want to do is to say request data will be json the loads which as i mentioned earlier is used to convert json into python dictionary and are passing the requested data the next thing i'll do will be to query the database so i'll say to do dot query filter by and i'll filter by the id that the user passes the next thing i'll do to make this persist will be to actually delete it from the database so i'll say db.session.comit then i'll return a dictionary with a 204 key set to delete it successfully so what i've basically done is to create a function called delete this function takes in an id which is the id that the user passes i convert the request body into a python object i query the database to filter by the id that the user passes then i delete it then actually delete it from the database using the db.session.commit then i return this object saying 204 latex successfully the next thing i'll do will be to build a delete component instead of the react application so i'll close this come over here and then inside of the components what i'll do is to create a directory called delete and inside of this delete directory i'll create a delete.js file then i'll create a component called delete which is a functional component and all it does is that it returns a react fragment with a button then i will export this so what i need to actually do is that when i click on the delete button i want to make a post request to the flag server and actually delete the data from the database so i'll create a function called delete to do and what this function will do is that it will fetch to slash api slash an id that i'll provide the method will be post and then the body will be json the stringify id which is the id but the question is where do i get this id from now i need to pass the id when i click on delete so i know that it will be passed in as a prop so i'll pass this id to it later on instead of the page then what i want to happen is that i will say that then response response.json.then data what i want you to do is to console the log the data so the message and then i want to be redirected to the slash url and i can do that using the use history that reactwaterdom provides so i'll say import use history from react router so i'll come over here and i'll create a constant called history and i'll set this as use history like so and after i've logged the data what i'll do is that redirects me so history dot push to slash so use history is also a hook and what it does is that it gives you the instance or the history instance of the route that you want to navigate to so now i have this component built what i can do is to use this inside of the show page okay so i'll go into the show page and inside of this page i'll say import i want to import delete from components slash delete like so and then over here i can use that component so i can say delete then i'll pass it the prop id which will basically be the id so the id that is provided over here and whilst i'm here let me create an hr tag which will link me back to the to-do's so i'll say link and i will say back to to do and this link will have a two prop which will take me to the slash root so now i need to import link from react router so now if i go to the browser and i click on i need to eat i can delete this it's not working so let's see inspect and see what's happening i can come over here then i can give it a key and i can set the key to id okay so now this is not working and rightfully it shouldn't work because i haven't set the on click button so what i need to do is to say if this button is clicked so on click i would like to call this method so delete to do like so and now if i go back to the browser and i do delete so it's not working because i said data this has to be data okay because it's the requested data so now if i go back to the application then i click on delete it gets deleted it says deleted successfully so if i click on i need to learn flux and i click delete it gets deleted as well if i click on these and i click on back to to do's i get redirected back to the to-do page the next thing i'll do is to create the edit button so when i click on this one i need to be able to edit a to do but i'm not going to do that i will leave it up to you to do it because it is always easy when you watch someone do it than to actually do it yourself so try to build the edit button and then when you click on the edit button you'll be taken on a page which will allow you to edit and save if you have any questions regarding that don't hesitate to ask me so the last thing i'm going to do is to actually create the animation and what i will use for this is react spring if you don't know how to use react spring i've got lots of tutorials on that you can check them out but i will come over here and copy this and inside of the roots of the react application i'll do yarn add react spring what i would like to animate is the card component so i'll come into the card component and what i'll actually do is to import use transition from react spring so i will say import use transition and then animate it from react spring then i'll go on and create the spring that i want so i'll say cost and as you know use transition i need to pass it the number of springs that i want and the number of springs that i want will be the list of to-do's and list of to-do is the id and i need to provide it with the css that i want so basically what i'm doing is i'm using use transition from react spring and the use transition the first thing that it takes is that it takes in the list of to do's the second thing is a function that returns the list of to do store id and then an object which is the from and enter and instead of returning a list of to do the map what i'm going to actually do is to return this so now if i go into the application as you can see everything gets animated so if i go here and i delete things are now animated if i say i need to dance everything gets animated now and that's basically it so what we've looked at is how to use flask as a rest api for a react application connect flash to react and build a to-do application which allows you to add to what you do click on it to do which we are able to do that using react routers able to delete from the to-do and be able to edit which i've left up to you to do it thank you guys for watching and i'll see you next time [Music] [Applause] you

Channel: THE SHOW

Views: 47,235

Keywords: Fullstack Flask React Tutorial, Flask Crash Course, Python For web development, Flask React, Flask Tutorial for beginners, Mastering Flask, Mastering React.js, Fullstack Flask tutorial, flask tutorial web development with python, Learn Flask for Python - Full Tutorial, Flask Tutorials, flask react, Python Flask Tutorial for Beginners, Build a fullstack app with Flask, Build fullstack app flask React, flask restful api, REST API Flask SQL Alchemy, crud, Flask React routers, react

Id: cb1vy1HpVwk

Length: 100min 10sec (6010 seconds)

Published: Tue Sep 29 2020