🔴 Python Flask & REACT.JS Full Stack (Python Back-end React Front-end)

hi friends i am parwaze and welcome to my new course on working with flask and react.js now before starting our main topic if you want to support my works you can just support me on my patreon page i have added the link in the video description now so you can see that this is my front-end codes and this is my back-end so i've created my backup rest api in flask and after that i i'm going to integrate that with the react.js now let's check that what we are going to build so for example in here i'm going to just click on the insert article and now i can add a new article so i can just say welcome to flask and react js cores for beginners and i can just add a description like this and i can just click on the insert you can see the data is added in here and i have my d new data in here now if you see my uh i'm using mysql database if you see mysql database up i have this new data so welcome to flask and react.js now now i can update this so let me just refresh my page so now you can see that i have my two data in here now if i click on the update i have a new form in here and i want to update this so for example i can just say a course and i can just say update it and if i click on the update uh you'll see now you can see that this is updated and if you see my mysql database and you'll see you can see that this is also updated now for example i want to delete this i want to delete my for example one of data that i have i want to delete this if i click on this you will see that the data is deleted and i don't have the data and if i check my mysql database up i don't have that data now let's just start our course now let's create our back-end api for this we need to install uh some libraries so the first one is flask as you know it's a simple framework for building complex web application and it's a flask is a lightweight wsgi web application framework it is designed to make getting started quick and easy so now flask is a micro framework and it's powerful after django it's tomorrow the second most popular web framework for python programming language now first of all you need to install flask you can just choose pip install flask and in here so i've already created a virtual environment and you can just say pip install flask and after installation of the flask we need another extension or library that's called flask sql alchemy and it's an extension for flask that adds support for sql community replication and it aims to simplify using sql communicate flask by providing useful defaults and extra helpers so we need to install this and we can just copy this and type install flask sql alchemy so after installation of the sql alchemy because we are using mysql database then we need to install mysql client now you can set up a flask sql alchemy with different databases like postgres uh sqlite mysql database and particularly we want to use mysql database now for that you need to install mysql data mysql client so we can just say pip install mysql client and now we are waiting for this okay flask sql alchemy has been installed now mysql client and after mysql client we need to install flask marshmallow now it is a flask marshmallow is a thin integration layer for flask and marshmallow is an object serialization or deserialization library that adds additional features to marshmallow including url and hyperlinks fields so because uh before sending the data to the front end we need to serialize the data for that we are going to use flask marshmallow so we can just use pep install flask marshmallow for the installation also because we are using uh sql alchemy also it's good to install marshmallow sql alchemy and okay now the installation has been completed now let's create our first flask application so i've created a folder name of packet and here i'm going to just create a new file and i'm going to just call it app.pi so the first thing is that we need to import flask so we can just save from flask we are going to import flask now after doing this we need to create the object of the flask so we can just say flask and we can pass underscore underscore name like this okay now let's create our route so we can just say at app.route now if you don't know about the flask i have a complete uh four hours training on flask web development i have added the link to the video description you can just check it so we're going to just use index and we can just give methods now by default if you don't give any method that's git so but we want to give it explicitly and after that we're going to just say if get or for example we can just say that get article articles now we can just first we need to import jsonify so jsonify and in here we can return jsonify and we can just say hello world now if you're using flask as a full stack then in here you can render your template but because we are not using we are using flask just uh as our backend so for right now we are going to just say return this hello world now after doing this now we need to run our flask application so in here we can just say underscore name and there is core main and we can just say app.run and we want to make the debug to true now if you're in the production level then you don't need to add this because we are in the development mode we can just make the debug true now there are different ways that you can run your flask application in visual studio code uh so uh the easiest way is that we can just and here we can just press f5 and from here we can choose flask and you can just copy the backend uh path that's where your app.pi is located and you can just paste it in here and after that hit enter now we are waiting for the running of the flask or flask application and you can see it's it will run in the debug console it will run the flask application and we can just wait for this so now you can see it running on this uh local host now let's just check this and we can just say localhost port 5000 and now you can see that we have hello world in here now if i change this to get you'll see that i'm receiving an error because right now the route is changed and it's not indexed it's for example git so you can give it whatever you want but for example in here i want it should be get now if i check this so now you can see that not found and if i go to the get you can see that we are receiving hello world now let's just uh test this with the postman and i'm going to just copy and paste it in here so the method is good and we can send so now you can see that we are receiving hello world and here and now we want to create our database and table so as i've already said that we are using mysql database so for that i'm using wamp server and i have opened my phpmyadmin and in here i'm going to create a new uh database so you can just call it whatever so for example i'm going to just call it for example flask or we can just say flask back and we can just say flask so after that click on the create so now we can see that database is created right now there is no table in this database because we want to create the tables using sql alchemy so now let's just create our table so the first thing is that we need to import the sql alchemy so we can just say from flask sql alchemy import sql alchemy and now let's create this in here uh we need to add our configuration so the first one is we can just say app.config and then here we can just say sql alchemy database uri okay now in here you need to choose what database you want so if you see the sql alchemy documentation there are different databases you can see that this is the database uri that you need to add so let me just make it like this so sql alchemy database uri and after that if you come down uh you can see that there are different databases postgres mysql and they have different configuration so we can just copy this and we can add this in here like this so this is the mysql for example if you're using sqlite you can change this to sqlite or postgres you can change this to postgres so in my case it's a mysql i'm choosing mysql after that you need to give the username so that's root and i don't have any password for that so i can just leave it blank this is localhost and this is the database name that is flask also we need to just add another configuration even though it's not important but if you don't add this you'll receive a warning uh and in here we can just say track so track and we can just say modification so sql can we track modifications and we want to make this too false so now we have created our configuration and after doing this and here we can just say db sql alchemy and we need to pass the app in here now it's time to create our table right now we have our database or flask database but there is no table so we can create our class and i'm going to just call it for example article or you can just say article so whatever you want and it extends from db.model after this you need to specify the fields that you want so i want it should be an id field db.column and it is db.integer and i want the primary key should be true now let's create another one that is title and db dot column and this is db dot take not text for this we are going to use a string and we want to specify for example hundredth character uh let's just copy this so another one is this is text and i don't need this 100 in here also we can add a date so date db dot column db dot date time and we can add a default for this and first we need to import date time we can just say import datetime [Music] datetime.date so now let's create our uh and admit it in here so init and we are going to add our title and description in here so this is also not title but this is description okay or we can just say body so you can just give for example i'm going to just give it body so body so we're going to add our title and body in here and the idea is about to create it and also we don't need to add the date because it is it will be added automatically when we create our for example our articles now let's just say solve the title we want to initialize this so so the title to title and cell dot body to the body so now we have created our table but right now this table is not added to our database that we have created our flask database now we need to add this so for that we can just change to the back end change directory to the backend and we can just open our uh python terminal and in here the first thing is that you need to from app we are going to import db so after importing the db and it's you can just easily say db dot create all and now let's check our this flask database you can see that we have a table of articles with the fields of id title body and also date all right guys now we have created our uh database and also tables now it's time to serialize our data so for this we have already said that we are using flask marshmallow and it's a library or extension that's used for serialization or deserialization of the data now before sending the data to the front end we need to serialize that so first we need to import flask marshmallow so from flask marshmallow we are going to import marshmallow and in here we need to create the object of marshmallow and we can pass the app in here so after doing this we need to create our schema so in here i can create class article schema and we can just say m a marshmallow.schema and after doing this we can create our class meta now we can specify the fields that we want to serialize so we can just add id so title we have body and we have date and after doing this now let's create our uh schema object in here so we can just use uh article schema and this is article schema now this is for one article for example if you want to realize one article then we can use this article schema now for example if you want to serialize a q reset for that we need to use money to true so we can just copy this and paste it in here and we need to add money to train here and let's let's change this to article schema so after doing this now let's create our route so right now we have just get article route and we want to create another route that's for adding the article so right now in here it's uh just returning a g65 okay now now and here we can just say let me copy this from here and we can paste it in this section this is at and the method is post and let's just say diff at article so we need to import request in here so we can just say import request and so let's create the title and we can just say request.json we need to pass the title and we can just copy this one for the body so body and this should be body so after doing this we need to create the object of our table class table so that is class articles so in here we can just say for example articles articles and we can pass the title and also the body in here after doing this we need to add this to the database so we can just say db.session.ad and we want to add the articles and also we need to commit the database so db dot session dot commit and at the end we can just return post schema so because it's just one article so for that we need to just return not post the schema sorry article schema so we can just say article schema.jsonify and we can pass our this articles so now the ad article is now uh it's prepared to okay now i'm going to open my postman and in here let's just copy this let's create another tab and we're going to check that we can add something in here or not let's just change this to post and we can grab this so go to the body and after the body we want to choose the row and from here it should be json and this is the title so this is the title and we can copy this we need to add a body or description we can say this is the body so now let's just send okay now you can see that we are receiving 200 okay and we have this is the body we have the date this is the date this is the id and this is the title and now if we get our this okay now right now we cannot get because we haven't created the get route till now so if you see now your database table articles we have a new data with id1 in here now we can add another one so let's just add another one this is the second title this is the second body and we can just send you can see that the id2 is added and now if we check flask so let me just check the articles you can see that we have another data of the second id in this section so this was the adding now let's change the get articles because uh and here we want to just get the article uh instead of jsonify so now we can just say all articles and we can just say articles dot query dot all we want to qe over all articles and after doing this we are going to just create results and we can just add up our schema in here so articles schema so because this time we are going to use a curious set so for that we need to just use uh the articles schema and we can just say dot dump and we want to add our all articles in here and after that we can just say return jsonify the results so now let's just check this that we can get our two articles or not so this time we can just go to the get so now if i send to if i request the get so you can see that i am receiving the two articles in here with so this is the first one then this is the second one and also if you go to the localhost now you can see that we have the two articles in here now let's create another route and that's for getting the specific details of the article according to id4 right now if i for example get the for example first article and if i send you'll see that i am receiving error and you can see that i'm receiving error so for that we need to create another route in here and i'm going to just copy this and paste it in here and uh so this should be get and we want to get according to the id and the method is get so now let's just say that for example post details or whatever you want and we can pass id in here and now let's just say post or we can just say article an article so for one article and we can just say articles dot query dot get we are going to use get and we want to get that according to the specific id and now we can just return because it's one so for that we can just use article schema dot jsonify and now we can pass the article in here so now this time if i had this url in the postman you'll see that i'm not receiving any error and i will receive the first id article so now let's just check this so now let's just send now you can see that i'm receiving the first article in here if i change this to second and if i sent you can see that i am receiving the id2 data and if i get you can see that i am receiving the whole data so the first id and the second id in here let's work on our update functionality so let me just copy this route and at the bottom we are going to create our updates so we can change this to update we want to update according to the id and the method is put [Music] okay now let's create our diff update article and we want to pass the id so the first thing is that we need to get the article and we can just say articles dot query dot get and we want to get a specific uh article according to the id so we can pass our id in here after that we need to get the title and also the body so we can use a request so request.json and this is title and we want to do do the same for the body so request dot json and this is body now we need to set our title and also body so we can just say article dot title to the title and article dot body this should be body and at the end we need to just commit the database and we want to return our article schema because it's just one article so we want to use article schema dot jsonify and we can pass the article like this so now let's check this update and for this let me just copy this from here and we can create a new tab and let's just add this in this section and this should be up date and i want to update the first one and also let's also copy the data from here so let me just copy this or we'll change the id so we can just go to the body after that we can choose row and from here we need to choose json and uh so let me just remove this id because id and date so we want it should be just body and title so body up dated and title updated now let's just send and we are receiving error let's check that where is the error oh and there is this let's not get it is put sorry for this and now let's just send this again and now you can see that this is the second body updated and also we have the title now this is also updated and now if you get this so you can see updated body and title updated and also the same will be for the our mysql database and if you see we will see the newly updated data in here let's just go to the flask and you can see that this is updated you can see this is updated and also this is updated and last functionality is deleting the data so now let's create data i'm going to just copy this and i can add this in here so this is delete and we want to delete according to the id and the method is delete now let's create article delete and you want to delete according to the id let's just get uh the articles so we can use the articles dot curie.get we can pass the id and now we can just say db.session dot delete and we want to delete the article and at the end we also want to commit so dot commit and we can just return post article schema dot jsonify and we can pass the article so our t call so it is db the article now let's just check this url endpoint in the postman and so we can create a new tab and in the new tab uh we can just copy this we want to delete the first one now the first id let's change this to delete and change this to delete now let's just send and now you can you can see that we are receiving 200 okay and now if i get uh again you will see that i have just one uh you can see that i have just one data with id 2 and if you see in here you can see i have one data and the same will be for the mysql database and you'll see that the first data is gone and that is deleted now let's just work on our front end and we are going to use react.js so now if you see react.js documentation it's a javascript library for building user interfaces now if you don't know about react us i have a complete followers training on react.js and react hooks i have added the link in the video description you can just check that video also now let's just install this uh so before installing of uh react.js you need to install node.js and after installation of the node.js now we can install the react.js so now there are different ways that you can use but we are using npx so you can just use npx create react app and after that you need to give the name of the your react application so now let me just copy this and uh let me just open my visual studio code and in here i'm going to just call it uh frontend and after that hit enter so now it will take some times and we are waiting for the completion of the installation all right guys now the installation has been completed we can change the directory to the front end and after that we can just say npm start and you can see that we have a front-end folder in here and we can just say npm start okay now let's just talk about these uh files so we have a frontend folder after that we have node modules this is the place that our modules has been installed we have a public folder and in here we have icons and we have index dot html file and you can see that in here we have div id we have divided root and after this we have logos and we have manifest.json and this is the important folder we have source folder we have app.css and this is the css codes and after that we have app.js and this is an important file that will work on this you can see that we have a functional component in here now there are two types of components you can use class components and also functional component now if you don't know about react.js uh you can just watch my complete series about for us training for our training course on react.js i have added the link in the video description and you can see that we have the class name app and this is the css code that we have in here so dot app and also we have app header and you can see that in the app.js we have app header man we have a logo in here uh also uh you can see we have this is for testing we have index.css and we have index dot js file and in here you can see that our apps mounted and this app was in our in here and also also you can see that we have our logo and uh this is the package dot json uh where the module is installed you can see that in here we have scripts and you can use for example start for running you can build you can test you can eject and this is the react version react dom version react script and these are the files that we have in here and now you can see that our development server is running and now if you see in the local sport 3000 we have our react us app now now this is the code that we have in the app.js so if i change this to for example welcome to flask and react js so full stack and so now you will see that we have this in our in here and now you can see that we have welcome to flask and react.js full stack all right guys now let's fetch our data from our flask back end to the react.js front end now uh if you see we have just one data uh right now with the body with the title and also id now uh let's before that let's just bring some changes uh to our this design so right now if you see uh this is our welcome to this is our react application and what i want to do is to just remove these codes from here because i don't need these codes and let me just remove this and in here i'm going to just create an h1 tag and i can just say flask and react js course okay now after doing this so uh what you want to do is to also we need to bring some change to our uh this design so right now if you see we have flask and react.js scores now let's just open our app.css and so in here we are going to just remove these two because we don't need this and we want to add this background color and also this main height in here and also we can just change the text color and like this also we want to just add a padding we can just say padding at 20 pixel and now we don't need this app header because we have removed this and we don't need this uh even we do need this dot app link and let's just remove this uh let's just open our app.js and in here we don't need this logo because we have removed this logo like this okay so after giving this our design and if you see you can see we have flask and react j scores and also uh let me just open our app.css so this is the color uh padding 20 pixel okay and we didn't need this text align center okay now uh we want to fetch our data in the app.js so uh for this we are using hoxx and our this course now if you see uh react.js documentation and a hoax or new addition in react 16.8 they let you use has state and other react features without writing a class now there are different hooks that you can use and if you're new to react js i have a complete video series about four hours training on reactors and react hooks i have added the link in the video description you can just check that video and you know about react now we will use state hooks and also use effect talks now if you see in here you can uh declare the state hook like this const uh you need to give the variable and also the method and after that you need to initialize the value in here and if you come down uh you can see that we call it inside a function component to add some local state to it now when you're going to create hooks you need to define your hooks inside the functional component for example we cannot create this outside of this component we need to add the hooks in here and also uh you can see react will preserve the state between re-renders and user state returns appear uh there a pair of volume so you can see it returns now the current state value now this is the current state volume and also a function that lets you to update it so using this function we can update this count now let's create our uh so first we need to import this in here so we can just say import use state from react and now let's also we need to use effect and if you come down we also use state and let's just talk about the use effect hook now if i come down you can see that you have likely performed the data fetching subscriptions or manually changing the dom from reactant mode and b4 we call this operation side effects now it means that you can use use effect hooks for the side effects for example fetching data or subscriptions or manually changing the dom or we can see our effects for short because they can affect other components and can be done during rendering now the effect hog use effect hook adds the ability to perform side effects from a function component also we need to create use effect hooks inside the function and it serves the same proposed as component that mount now if you're familiar with the class component when you want to fetch some data you need to use component that mount and you can fight the data and component that mount now in react.js when we are using functional component we can use use effect hooks and now let's just uh you can see that this is the syntax you can use use effect and after that you can just use your code in here and now let's just create this also we need to import i use effect and first we need to create our state in here so we can just say cons articles and also a function or method for changing of this article so we can just say set articles and after that we can just use use state so we use statehooks now in here you can specify the initial volume so and here i'm going to you can use object or array and here i'm using an mpt array so after this now let's just create our use effect in here so use effect and it is an arrow function also because we want to fetch the data just once by this reason we need to add uh an array dependency in here if you don't add this it will uh fetch the data in in every render now because you want to just it should be uh used just once so for this reason we are going to add an mpt uh array in here uh now we are going to use fetch you can use fetch or axios but i'm using fetching here i can just say fetch we can just give the http and we want to just use this you can give it http localhost so i can just say http and so this is my local port and we won't get now if you see our app.pi and let me just come down uh so you can see that this is my get route and in here i'm curing over the articles and i want to get the all articles now if you see my mysql database up i have just one data in here because in here you can see that the using the get tryout it's returning me just one data in here and now my flask database after that click i'm clicking on the articles and you can see that i have just one data in here so you want to fetch that and now the app.js so we're using get and after that we need to give the methods in here so the method and the method as get and also we need to pass the headers so we can just say headers and then here we can just say content type and let's just say application slash json now it will return a promise so we can just uh grab that in the catch block so we're receiving a response and then the response we can just convert this to the jsons or response.json and we can just create another dot then and then here we can just say response for right now we can just lock so we can just say console. console.log the response and if there was an error we can just grab that in the cache block error and so console.log day error okay now let's just check this that it's working or not now if i inspect element uh i should see the uh data or no i'm seeing error in here now if you go to the console you can see that it's telling that access to fetch from origin has been blocked by course policy now we need to install another library that's called flash course now you can use uh pep installed flash cores and it will be installed so i've already installed it after installation you need to open your app.pi file and at the top first you need to import this so we can just say from flash course import course and then here we can just say course and we can pass our app okay now let's check and this time we will not receive any error and you will see the data so now let's check and let's just refresh our page so so again we are receiving an editor because uh and here we need to add our port so it's port 5000 and slash get now we will not receive any error okay now you can see that we have our data in here and you can see we'll come to flask and react.js course and this is the first data that we have in here okay now we want to show our data in our front end so instead of console.log what you want to do is to we have created our uh use statehook hooks in here so we have articles and set articles so we want to set this response to this articles and after that using this articles variable we can access to the data so now instead of console.login here we can just say set articles and we can pass response in here and now we can access to data and let me just come down and here so we have our flask and react.js course and in this section we want to iterate over the articles so we can just say articles dot map so article and now in here we want to just return uh we need to create a div and let me just close this div first we need to add uh when we are trading over for example over an array or when you're using map up you need to add an id or key so for this we can and here we can just say div key and we can because we have an id uh for our uh this articles if you see your app.pi and the models we have an id in here and we can just say article.id and after this we need to create an h2 tag so we can just say h2 h2 we want to just say article.title now if you see our model we have title we have body and also we have date so article dot title and we have a p tag and then the p tag we have article dot body and for right now let's check um you can add the date and i will add that so for right now let me just check the article.title and also article dot body or let's also add the date in a p tag so let me just add and i can just say article dot date so we have article we need to uh we are iterating over the articles now this is the articles that we are receiving from our state and after trading we are adding the id and we want to render the title the body and also the date now if you see you can see now we have our one data in here this is the title this is the body and this is the date that we have for example i'm going to add another data from my this uh phpmyadmin and let me just click on the insert i think i can add it from here so i'm not going to give the id because it's auto increment and for the title so this is the second title for flask and react js and for the body we can just say this is the uh second body and let's just copy like this and we can add a date time let's just for example from here we can choose any date or time and click on go so now the data is added if we see we have two data in here now if i refresh my page you can see that i have another data in here so this is the second title and this is the second body all right guys now we have fetched data of from our flask back into the react.js front end and you can see that this is our two data and uh now this is not methods this is method let me just uh correct it also right now you can see that uh we have our use effect hooks in our app.js file and also we have uh these for example articles titles in our app.js now it will be good to create a new component and we want to just copy this codes uh and bring these codes on that components so we won't separate our code so for this in the source folder we want to create a new folder at name of com components and in the components we want to create a new file a new component at name of article list.js so it will be a functional uh component now uh i've already installed an extension and let me just show you that is es7 react redex you can install this so now you can easily create functional and also class components using that extension for example if i if i write rfce you can see we have functional component and if i say rce you'll see that i have a class component now i want functional components so for this i can just use rfce and after doing this what i want to do is to just copy some codes from my app let me just okay now copy this codes from app.js and bring that to the article.js and after that you'll be using the props we can feed the data now let me just grab this okay now so i want to add this code in here okay now if you see in here uh right now we have articles.map but we don't have articles in our article let's.gs the articles is located in our app.js and if you see in here we have our state use state so set articles and also we can access to the data using this articles now this article is not located in article list.js but it is in our app.js component now we want to send this articles using the props now using props we can send some information or some data from our parent component to the child component and we want to do this in here so now the first thing is that we need to add props in here and like this and first we need to check uh that we we have the articles and the props we can just say props dot articles if we have we are going to trade over the articles now we have pops.articles now we need to add this article list.js in our app.js so for this we need to just use import article list from and it is article list okay so now we can add this article list and here in this section so you can just say article list like this okay so now if i see uh my react application i will receive an error now you can see that i'm receiving error articles as not defined and articleless.js so we have articles in here we have used props but we need to send this article from our app.js now we have added this in here now in here we can just say articles articles we have we are using articles articles and after that we can access this articles in our article list.js using the props so you can see here we are using props and uh in here we need to just use props dot articles so you can just say props dot articles dot map so now let's check now [Music] and now you can see that we have our data and there is no problem now we have a clean code we have some we have a new component for the article list.js and we have added that in our app.js all right guys now let's learn that how we can update our data so we have already learned that how you can fetch the data now it's time to talk about updating the data now before starting our main topic because we're using bootstrap so for that you need to install bootstrap so you can just use npm and install bootstrap and after that hit enter so now i'm waiting for the installation of the bootstrap okay now bootstrap has been installed and after that so let me just run my react.js application again now uh we need to just go to the index.js and we need to add our this installed bootstrap so in here i can just say import bootstrap dist and we can just say css bootstrap.main.css okay now let's just open our article let's.js because we are going to create uh two buttons uh for every article one update and one deletes off right now we're going to just work on the update but we will also work on the delete button so now the article uh list is the good place that we want to add all this functionality okay now up in here now so so this is my uh after uh this article title or an article body and article date i'm going to create my div class name and uh i'm going to just use row let's close the day div and let's create another uh the class name and it is called md1 let's close the dev so i mean here um i'm going to create my button and i can just say button class name and it is beating beating primary and let's just close button not diff so button and also we need to create another button for the delete we can just give this update uh let me just remove this cool md1 and this should be danger and this is delayed now let's check that we have these two buttons or not so now we can see we have two buttons uh update and also delete now let's add um hr tag uh in here so after these divs and we can just say hr okay not gr but it is hr now let's add an on click for our this update button so on click and this is an arrow function and in here i can just say edit article and i can pass article as parameter in here now let's create this edit article so in here i can just say considered article and i can pass article now in here what i want to do is to up i will create another method and that method will be on app.js and on the app.js i will update my articles so for this what i want to do is to use props so we can just say props dot edit article and we can pass article in here so we will create this method uh edit article and we will send this edit article to our this article list.js so till now we haven't created this edit article we have just created this now i'm going to just open my app.js and in here we are going to create our this uh edit article so and here uh so in this section i can just say cons edit article now also i need to create two more state for editing uh the article so i'm going to just copy this and this is edited article and this should be set edited article now and on my this method i can just say set edit article and i can pass article in here so also i need to add this article in this section okay now my this edited article can access to the data for example to the title to the body and to the date and what we want to do is to because if you see in our article list.js we are using props.edu article now we need to uh tell react.js that we are using this edited article so for this reason we can pass this in our article list so i can just say and i can pass it like this okay now before this let me just comment out this i'm going to just say console.log for right now let me just say hello world and let's check that out it's working or not okay now if i inspect and uh okay now if i click on the update you can see that we are receiving hello world and hello world in here now let's just remove this and we want to uncomment this okay so now uh we have our articles information and our the cd date article now we wanted to send this edited article to our new component that we want to create we're going to just call that component form.js so we can just say form form.js and this will be a functional component and in here we can just say rf ce so this is a functional component and in here we are going to use props okay so now let's just import this in our app.js and in here i can just say import form from components and we can just say form and now let's just use this form in here and we can just add this in here so we can just say form for also because we want to send the data the article data to this form component and the data is in our this uh and here in this edited article so now we can grab this and then here we can just say article edited article okay now let's just open our forms uh our forms.js our form.js and in here we can just say first we are going to check that if we have if we have the data on the props so we can just say dot article and if we have the data uh then we can just say props dot article dot title so right now we're going to just uh print the title in here okay now let me just describe once more so we have created a new component nemoform.js because we want to send our articles information in here so we are using props and we want to send the article information from our app.js we have added our form and app.js and article information is uh in our this edited article and in here and we have sent this information to the form.js okay now now if i uh so if i for example click on one of these buttons now you can see that i am receiving flask and react.js full stack now the title because if you remember in the form.js we are saying that props.article props.article.title and now if i click on and here you can see that this is the second title for the flask and react.js now instead of showing just this title we want to show form so by clicking on this update buttons we want to populate a forum for example for the title and also for the body and after that we want to populate the data and that forums now before that now i've created uh uh this uh edited article and set a dd article now i want to just uh make this null i like this it should uh it should be null and after that i'm going to open my form.js now the forum.js we are going to create our form now let me just remove this title so if we have title in the props and here we can create our form now i'm going to just create uh the class name and this should be mb3 and let me close the dev and so in here now okay now in here we can create our uh first let me just create a label and i can just say html4 uh it is for the title and we can give a class name okay so class name and for the class name i'm going to just give it forum label and let's just give it title this should be like this class name now let me cut this and here we are checking if we have uh if we have the article in the props we are just rendering our uh this form and the else case we want to just say null so let me just bring this in here and in the else case we can just say now so now let's create our form in here input type text so input type text and we can add a class name so this should be form control and also we can add a placeholder so let me just say place holder please enter title now let's just copy this and we want to just uh create one more uh let me just copy this label for the text area so this is body and this should be form label and let me just say for example description or body you can just give it whatever name you want and this time instead of let me remove this we want to create a text area so text area so now we can give the class name and let me just copy this class name from here and we can add a placeholder so in the placeholder we can just say please enter description so now let's check that we have this form or not so now if i click on this you can see that i am receiving the form title description and right now uh it's uh react.js form it's html form it's html form you want to convert this to the react.js form now for this uh also i need to give a row for the stick stereo i think row five okay so now let's create uh some more state in here and uh in this section so i can just say const title set title and use state we can give it an empty string we want to create another one in here so i can just say body and set body okay so now because we want to receive our title and body from the props uh we are receiving uh by this result we need to use a use effect hawks in here so in here i can just say uh or first let me show you uh first i'm going to just do it in here so i can just say props uh dot article.title and let me just do this for the descriptions or the or body like this okay now in our input type in here we need to add a volume so we can just say volume and for the volume we want to add title in here and also we need to add an on change for this because we want to for changing uh the data so for right now let me just add another value for the uh this text area and i can just say body [Music] okay now let's check so user status and not defined and we can just say use state so because we are using using state hooks in here and by this reason we need to add user statement here and now let's check [Music] so cannot read property of the title now uh it's because if you see uh now let me just show you if you see in our app dot js and app.js uh this did it article in here it's now and we're sending this edited article to the forum.js by this reason first we need to check in here and there is uh from there and in here uh before sending the uh data to the form.js we need to check uh in this section so let me just say and here we can just say if we have the edited article so edited article so if we have that we want to just uh show the form and send the data like this and in the else case we are going to make it null so we are going to just check if we have the edited article we are just rendering the form and we want to and we're going to send this data to the form.js in the else case we are going to just return null now uh if we see so uh now okay now we don't have any error and uh if i click on update uh you can see that the data is populated in here and we have the uh this but you cannot bring change to this you can see that i cannot change bring change now let's add an on change for the our these input fields in here and so in this section we can just add an on change so we can just say on change and it is an arrow function and we can just say set title a dot target dot volume and let's do the same for the for our text area and i can just say set body and i want change set body.target.volume and also let me change this to rows i think it's throws because i'm not seeing uh the row five and i think it's rosia now uh also let me just uh or there's no problem now let's just check uh okay now you can see so if i click uh let me just refresh this and now if i click on this i can see that i am receiving the title and also the description now i can bring change to this like this okay now the last thing that we need to add that is a click but uh in here an updating button so for this we are going to just create a button so i can just say button and let me just close the bottom and this should be update and we need to add a class name and the class name is btn btn success and we can just give a margin top three okay now let's add an on click for this for updating the data i can just say on click and let's just say update article let's create this update article and here so i can just say const update article and it's on a row function now we can update uh add our updating codes in here but it's good to create another file or another component for just for our api services so i'm going to just uh open my components and then here i can just say api service dot js and in here i'm going to create my codes so i can just export default class api service so this is a class and we're exporting that and in here we can create our update so static update article and we want to pass id and body because we want to update according to the id and we can just return fetch so now let me just copy uh if i s okay now let me just copy this from here or we can just grab this whole code and paste it in this uh where is this okay now this is my api service okay now the method is put and the url is if you see my app.pi the for the route for the updating we have this update and we can update according to the id so now in here we can just change this to first we need to change this to backticks and we can just say update dollar id so the method support and with the headers we have and also we need to add the body so we can just say body and json dot stringify and we can pass our body in here and also we can just say dot then [Music] let me just make it in here so dot then resp rest.json so now we have created our update article and it's time to add this in our uh in our update article method now if i open my form dot js now in here i have created this and i can uh for so first i need to import api service so i can just say import api service from components and this is api service and in here i can just say api service dot and update article let me just update article yeah update article static update article now first we need to add the id so it is props dot article dot id so because we want to update according to the id and we can add id in here and for the body we want to add our title and also body now we can just say dot then and respond for right now we can just say console.log and the response and also if there was an error you can just say dot catch error console.log the error so now let's just check that it is working or not so cannot resolve module not far so sorry it's start dot component now we can check so now we're going to click on the this update uh so we have a warning it's html warning and let's just check uh and the form it should be in the form.js and yeah it's not html form it's html4 by this reason it's complaining okay now now we have our this uh and here the uh our title and description let's just say update it and if i click on update so we are receiving uh from has been blocked by course policy and we should not receive this error because we have added already added the course policy maybe the problem is from the url so updated and if i click on that update so now let's check the url i think uh the main problem is in our api service [Music] all right guys now we're receiving error and because we have done a silly mistake now if you seen here uh and the content type i'm using application slash json now it's not applications let me just remove this s and by this reason we are receiving the error from cross origin now uh now let's check our data that we can update right now we are uh if you see we are just saying console.log the response and now let's just refresh our this page and this time it will work because it was just a simple mistake and okay now if i click on update now this time i'm going to just say update it and if i click on update button and now we can see that the data is updated and you can see that this the title is you know updated now if i refresh my page this should be updated now let me just refresh my page and you will see that my title is uh updated now you can see that this is updated now instead of console.log what i want to do is to uh send this data this response to my app.js and i want to refresh my ui so for this uh in the form.js we are going to just remove this console.log and in here we are going to just say props dot for example you can just call it i'm going to just call it for example updated data so up updated data and we want to pass the response in here okay so now let's just create our this updated data in our app.js so now and here i can just say const updated data and we can just pass article in here so now in this section and update it uh first we want to check so i'm going to just create a const new article in here and i'm going to uh just say articles.map so first let me just iterate over my articles and i can just say my article and after doing this now i can check if i can say that my article dot id is according to the article dot id i want to return the article in the else case i can return my article so my article and after that i need to set this new article to the articles so you can just set articles and i want to just set this new article and also because we are sending this updated data method to the forum.js and we need to add this uh updated data method in our form in here and i can just say updated data and updated data so now let's check that it's working or not now let's make click on this uh update in here and i want to so update this okay now let me just remove this updated and i can just click on the update and it's not okay now you can see that this is updated without refreshing the page now let me just show you once more because i thought that it's not working so let me just click on this update and in here i can just change this to react.js and let me just change yeah this is the second title for flask we are up dating and if i click on the update and you can see that this is updated we are updating so now it's working uh and here we have a problem now right now you can see that we have in here if i click on this you can see that it's not changing it's just in our this title uh we want to change this by updating by clicking on every button and we want to change this so for this we are going to just uh open our form.js now instead of doing this we want to create a use effect token here so use effect and in here let's create our use effect hook so i can just say use effect and it is an arrow function we need to create and we can just say set title and let me just pass this in here and also we can just say set body and for the set body also we need to just add the body so i can just make it like this and we want it should be according to the uh props dot article so in here we can specify props dot article okay so now let's just check the new functionality okay now if i click on this button you can see that i am receiving the first title and also description if i click on this you can see that i am receiving this and i can just update this and i can click on this and you will see that now this is updated now let's learn that how we can insert data to our back into our flask back in using react us front-end so now before starting our main topic now and myapp.js when i have fetched the data in here i have used applications json it's not applications but it's application even though there was no problem and we have fetched the data but it's good to use application slash json now so for this if you see in here if i click on update button i have a form in here with the populated data for the title and description now i want to use this form for inserting the data and this time i don't want to populate the data and i want to use the same form now for this what you want to do is to uh we are going to open our app.js file and in here we need to create our button so i want to create a button in here for inserting the data so this is my diff class name app and we are going to just create another diff class name and i'm going to just call it call and let's close the dave div and i need to create another div in here uh so this okay now this is div okay now let's create another diff div class name and it should be a call oh yeah this is raw and that's cool so row and also call let's just close the dev okay now in the first column we are going to add our this h2 tag h1 tag like this and i'm going to just copy this and paste it once more and this time in here i'm going to use a button so let me just remove this and i can create my button and i can just say uh insert article and i can give a class name so the class name is beating between success and also i need to give an unclick and i want to open my form so in here i can just say on click and on click i want to create a method of open form now by using this open for methods i want to open the same form of my updating but this time i don't want to populate the data now let's create this open form and uh i can just create that in here so i can just say comms open for and in here we can use set edited article so set edited article and now this is the place that our uh data is located and we can just make the title so it's an object to null and also the body to null okay so now let's check that it's working or not okay now you can see that we have insert article button if i click on this you can see the form is populated and we don't have the data and here it's simply now we have a problem here you can see that the button is also update we want to change this to for example publish or insert now we need to open our form.js and here we are going to check now uh we are going to update according to the id now we want to check if we have id that that's update button and if we don't have id that is insert button so in here in the section where i have my button i can just say if i have props dot article dot id so if i have the id i'm going to just show this button like this and in the else case and here if i don't have the id i want to show the button so we have an error in here expression expected so we can just add this in here and we can just copy the button so now if you don't have the id that is so if we have the id that's update and if we don't have the id that's insert article so now let's just change the method to insert and in here i can just say insert okay so now let's just uh copy this insert article and we need to create this insert article in here so i can just say const insert article like this and now let's just create our this insert article so we're going to open our uh we need to open our api service we need to create our insert article in here yeah in this section and i think i can just copy this uh like this and paste it in here and we are going to just bring some changes so this is insert article and i don't need the id i want to just should be body and this time if we see our app.pi file uh for inserting uh now this is the add route we have our drought in here and we can change this to add and we don't need the id so like this also we need to remove this so the method is post we have headers and we have a body and in here we want to stringify the body and after that we are receiving the reset dot response and response.json so now let's just add this in our forum.js so we're going to open our form.js and in here we want to call our api service so we can just say api service dot insert article and in the insert article we need to pass the title and also the body and also we can just say dot then and response and in here i'm going to just say console.log the response and if there was an error i can uh grab that in the cache block so i can just say error console.log the error so now let's check that it's working or not so now if i click on the insert article you can see i have a form and you can see that the button has changed to the insert if i click on the update you can see that we have update but if i click on the insert i have my insert mechanism here now let's just add the new data so you can just say uh i'm adding the new title in here from react.js front and and let's change this to this encryption description and let's just copy this now if i click on the insert and you can see that the data is added and if i refresh my page i should see a new data in here and if i come down you can see that i'm adding the new title in here from react.js frontend now right now it's working what we want to do is to notify our app.js so for adding the data we want to update our ui now for this instead of console.login here we are going to just use props so we can just say props dot article and we want to pass response in here now we will create this inserted article in our app.js because uh we using this we want to uh notify our app.js so now let's just create the sensor that article in our app.js and after the form i can just say comms and there's that article and i'm going to just pass article in here okay now let's create cons new articles and i can just first i need to copy my articles and after that i can add the article in here using the separate operator i'm going to just copy the articles and after that we need to set uh this new articles to the article so we can just say set articles and we can add our new articles in here so now let's just uh check our new functionality that it's working or not okay now i'm going to click on the insert article and you can see that i have my form in here let's add new data and if i click on the insert so i'm not seeing that now the ui is not updating and let's refresh we have the data yeah we have but the ui is not refreshing let's check that where is the uh problem now the problem is this that we have created this but we haven't send this to the form.js now in here you can see we are using props.inserted article now we need to pass this in our this form uh form in here we have so inserted article and this is inserted article now it should work if we check [Music] okay now if i click on the insert article and we can just say testing our front end and now if i click on the insert article now you can see that the data is added and the ui is refreshed automatically and we can add another one for example some more data and and if i insert so you can see that the data is added in here all right guys now let's work on our last functionality and that's deleting the article so right now we have a we can update we can insert article and we can retrieve the data now let's just learn about uh updating uh not updating but deleting the data so we have already created the delete button in here and now and uh article list.js so we have our delete button now let's just add an on click and in here it is an arrow function and we can just say delete article and let's just pass article in here now let's create this delete article in here so let me just in this section we can just say const delete article and we can pass article so now we need to create our uh deleting functionality in the api service so i'm going to just open my api service and in there i want to create my delete functionality so let's just open our api service and then here we have insert and let me just copy this and paste it in at the bottom [Music] so we we don't need body we need just id because we want to delete according to the id and we can change this to delete so return fetch and this is if you see our app.pi and the route for deleting is uh delete so you can see that we can delete according to the id okay now let's just add delete in here so we want to delete according to the id the method is delete and uh we don't need body and we don't need any response in here it's just a simple method is delete and this is the content type okay so now let's just open our article list dot js and in here first we need to import so we can just say import api service from dot dot and it is on the components so components and that is api service now let's just say api survey dot delete article and we need to pass the id so we can just say article dot id and then here we can just say dot then and it will be an empty response so now we need to notify our app.js that for example an article is deleted props don't delete article and we can pass the article in here so now let's just create uh this delete article in our app.js and we will send that to the article list we will send that through dodges to the article list so now in here i can just create my this method and i can just say const and we can pass the article in here and now we are going to check uh we need to filter the data so we can just say cons new articles uh we can just say articles dot filter and we can just say my article and then here we can check that if we have id if we can say that myarticle.id and if it is according to the article that id so by this reason we can just return falls and in the else case we want to return through and also after this we need to set uh our this new articles to the uh the to the article state that we have so we need to set that to this uh said the new article to the set articles so now let's just come down and in here we can just say set articles to the new articles so now let's just save our files and now we can test our new functionality so now i want to delete for example this testing our front end if i click on the delete and so article is not defined i think yeah we have error in here let's just say article dot id so testing our front end and let's just click on the delete and again we have error props that delete article is not a function okay it's because because we need to now send this to the uh from app.js we need to send this delete article so let's open our app.js so this is our delete article and an article list we can just say delete article and the late article now we should we can we should delete the data and if you see that previously the data is deleted and now if i click on the delete again so you can see that the data is deleted and we don't have the data in the front end now if i check my back end you can see that in my mysql database i have just four data now for example i want to remove this one some more data and this one i want to delete this and let's just first uh for example if i want to update i can update this and first let me just work on the update so if we click on update and you can see that this is updated and if i see my mysql database and you will see that this is updated now if i click on the delete you will see that this data is deleted now we have just three data and if i check my mysql database and now i have just three data in here so like this you can uh create your simple backend rest api in flask and after that you can integrate with the react.js uh if you like the uh video you can just subscribe to my channel like the video and also if you want to support me you can support me on my patreon page i have added the link in the video description

Channel: Parwiz Forogh

Views: 87,715

Keywords: Python Flask & REACT.JS Full Stack (Python Back-end React Front-end), Python Flask & REACT.JS Full Stack, Python Back-end React Front-end, Python, Flask, REACT.JS, REACTJS, reactjs frontend with flask backend, python and react web development, full stack with python and reactjs

Id: msEmUtYqVV0

Length: 111min 55sec (6715 seconds)

Published: Fri May 21 2021