@@ArpanNeupaneProductions Bro here You said arpan@Arpan-MBP React-Flask-Video % npx create react ct-app client. What do we replace 'arpan@Arpan-MBP' I replaced it with my user data like this 'MyUSER@MyUSERworks doesn't work I even put the '-MBP' in front of the second MyUser it still doesn't work. Can you please help me with this?
@@ArpanNeupaneProductions in windows when I do: 'npx create ct-app client' it gives the error: npm ERR! could not determine executable to run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\MyUser\AppData\Local pm-cache\_logs\2023-06-11T03_39_26_191Z-debug-0.log
Excellent content! As someone that loves using React but prefers Python for backend, this video is amazing. I did run into a CORS error when connecting the front and back-end. The fix was as simple as installing and importing Flask-CORS to my server.py. Thanks again!
awesome video man! I'm new to this stuff and your content really helps me. I wish I new about your videos before I started a project as I would have progressed a lot more. Either way, I really appreciate the content you make. recently one of my best friends from high school passed away and I wanted to make something in memory of him and I thought that making a website would be the best for him. Your videos have really allowed me to accomplish my goal. He was like a brother to me and because of you I can become closer to him. Thank you!!!!!
Great video, this really helped me out. Python is new for me, and I wanted to jump into it by making a web app. This gave me a great start, it was so easy to follow
Great video, an issue I was running into was using localhost for the JSON file, and so when I replaced localhost:3000 with 127.0.0.1, and after loading Localhost:3000 this seemed to work. Awesome job!
This is the type of content no one makes and literally very important, keep up the good work, can you make a video on how to integrate flask with react native
🎯 Key Takeaways for quick navigation: 00:29 📁 *Created a folder named "flask-server" for the Python backend, then generated an empty file "server.py" within it.* 01:20 🔄 *Created a React app using `npx create-react-app client` for the frontend in the "react-flask-video" folder.* 02:23 ⚙️ *Configured the backend by creating a virtual environment, installing Flask, and setting up a basic Flask app with a route returning a JSON array of members.* 04:41 🗑️ *Removed unnecessary files and configured the frontend's `package.json` to proxy requests to the backend running on `localhost:5000`.* 05:52 🖥️ *Modified the frontend's `App.js` file, using `useState` and `useEffect` to fetch backend data and display it on the frontend.* 08:35 🔄 *Successfully fetched backend API data, displayed "members" on the frontend, and handled loading state during API request.* Made with HARPA AI
Hey, I needed a little help. Even though the members array is showing in my console, but in the web page it is still showing "loading..." Can anyone help me with this? Thanks a lot!
Really amazing and easy to follow, just one question, If a user uses the network developer tool, The backend API can be exploited and scraped, How can We hide it, or avoid this situation
Thank you very much for your video ... But I have a question ... how do you deploy the project? above all I would like to know how to do in windows server for example .... greetings.
You're welcome! I haven't deployed to a Windows server before so I'm not sure. Maybe try looking up documentation for it or finding some videos that may provide you with information?
For those having problems, spefically import "flask" could not be resolved from sourcePylancereportMissingModuleSource import "flask_cors" could not be resolved from sourcePylancereportMissingModuleSource YOU MUST do pip install flask, and flask-cors BEFORE, BEFORE you activate the virtual environment! I spent so long trying to figure out why i was getting this error, and I JUST DISCOVERED IT. Then in your virtual enviorment install them as well.
what's the plugin you're using that shows you the size of the react import or whatever? as well as the one that allowed the quick sample upload? I tried and those features didn't work for me. But tutorial is overall good and concise, love it
Despite having configured the proxy correctly, it still makes requests to port 3000 instead of 5000 when checking on the dev tools network tab. Any idea why is that?
hey i tried it and this error came : I know this is minor problem but as I'm new to react i cant figure out why and where it parsing html as json instead of accessing members SyntaxError: Unexpected token '
Hi Arpan, thank you for the great tutorial. I am using a Mac just to familiarise myself with this OS. Two questions please. 1) I can only find debug console. I can't seem to see the Console where the object can be printed. Secondly I am not entirely sure why the app only shows Loading.... I don't understand why it is undefined. The browser returns results but something is missing. import React, {useState, useEffect } from 'react' function App() { const [data, setData] = useState([{}]) useEffect(() => { fetch("/members").then( res => res.json() ).then( data => { setData(data) console.log(data) } ) }, []) return ( {(typeof data.members === 'undefined') ? ( Loading... ) : ( data.members.map((member, i) => ( {member} )) )} ) } export default App
Hi Arpan, thank so much for your tutorial, it will help me a lot in my projects :D. But, I have a question, what should we do if we want to deploy the project? Will they have to be separated? for example, flask in "pyhtonAnyWhere" and react in "Versel"? Or, can we keep them together? for example, together in "Vercel"?
Thank you for liking the video! I haven’t done a video on deployment because I’ve been really busy with school, but if you’d like to deploy a project like this, I’d recommend checking Miguel Grinberg’s video on it: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
Pease help me with this Error, when test the fetch option. Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
@@laycookie-f6i how do I know where I am fetching it from? I had to remove the "proxy": "localhost:5000" line from the package.json file and include a setupProxy.js file with http-proxy-middleware where I configured the target: "localhost:5000" and I'm still getting this "Uncaught (in promise) SyntaxError: Unexpected token '
@@ArpanNeupaneProductions would be cool to see how to deploy a project like this, I like the python react combo, seems to be a clean and clear environment.
@@JorgeBlancoPhotography I see, I haven't done a video on deployment because I've been busy with some personal projects. However, I would recommend that you check this video out to learn how to deploy a Flask + React App to Heroku: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
Hi, great tutorial Thank you! There's just one problem I'm having - I get an error in my localhost:3000 "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" and don't see the json that was sent. Do you have any idea how to solve this?
Hmm, do you have a link to your code? If it’s a SyntaxError then can you please check your code on the frontend side to make sure that it is the same as the code in the video?
I ran into a similar issue. The request to the server was refused because of CORS. In your server, run "pip3 install flask_cors", then in your server.py import the cors (from flask_cors import CORS), lastly insert "CORS(app)" under the app declaration. This will allow your react project to make Cross-Origin requests.
@@nathanseals4819 i had a similar problem, i tried to follow your suggestion and apparently it works. Thank you for helping me sorry i'm not fluent in english
Hello, this is the most useful video I found, but please make a video on how to setup a group project, like one person does backend and one does frontend
Hello bro i need to contacts on some flask issue , for most commands it is showing object not found and commandnotfoundexception , i think you can help this
So great logic to get the API, but how to use it to make a application? Thank you. Can I should normal react application to use this API? Thank you. It's like, if I'm gonna make some input, how can I make sure the input data that will use the API to go to be in the database? Thank you so much.
Yes! This API can be used in a real application. If you want to receive input to a database, you can make forms in React to type input into. Then, you can store the value of each input form in a variable and send that variable through a post request to the backend using Axios. In the backend, you’ll just have to set up routes for that post request and you can access the data that was sent from the frontend and use it however you’d like.
Thanks for the tutorial.... But my python code needs input when you call it, which I'll be obtaining from the frontend...so how can i make the call to the api which needs an input to output data... Also if i have my project on say pythonanywhere or heroku, should i follow the same steps shown here ?
Can you further specify what you're trying to do so that I can better assist you? Are you trying to get data from the frontend such as the input entered in forms and receive that same input in the backend?
@@ArpanNeupaneProductions Yeah mate, basically I'm making a youtube analytics website, like getting playlist length etc... I'm working on my frontend with react js, so I'll be getting some input from the user such as the playlist id, etc.. then i want to take all that arguments and call my python api which will have different classes for fetching different data from the youtube api...so basically i just needed to know how can i pass those arguments to the python api from the frontend. (When I'm going to push it in production, I'm going to host my frontend on vercel and on my Python api on heroku)
@@pshr2447 I see, in your frontend with React, you can send those input values to the backend with Axios by sending POST requests. Your backend will then catch those POST requests and then get the request body with the input values and you can use them however you’d like :) Hope this helps!
React is the most popular frontend library and is used a lot. Python is great as well and is great in machine learning, data science, AI, and web development and they can both be used to create great applications. Now, I don't know about companies since I haven't worked at any because I'm only 13, but I'm sure some companies do use them. Larger companies might also use them along with other languages.
this got me confused: if I remove line that checks whether data.members is defined or not, then i got error message 'map' is undefined. Does anyone know why?
Thanks for the video. I get an error when mapping data.members in react. 'Property "members" does not exist on type '{}'.' Can't find any good answers on Google :/. Any advice?
@@ArpanNeupaneProductions Yeah I figured it out. With typescript I have to explicitly define data types of incoming json elements in an interface, before I can map. More confusing. Great video, I'm just using a different environment
Please am completely new to js i want to make gui for my API it is basically a webview that will load a website with custom cookie's, i have no idea how to do it with js, is it even possible. Do u recommend any documentation
Do we *Have* to create a virtual environment in order to make a connection between the front and the back end? That's the only step I omitted, and I'm getting this error in the terminal when I run the React app : Proxy Error: Could not proxy request /members from localhost:3000 to htttp://localhost:5000/ and on the browser itself, it gives the following error: JSON.parse: unexpected character at line 1 column 1 of the JSON data any help?
Can we not do this in jquery/plain js ajax at client side,,,, I’m still not getting why separate instance for running react when you can do same thing with ajax. Please correct me / help me understand this better
You'd first need to run 'npm run build' in the frontend and serve the index.html file in your build folder in your backend in order to deploy to PythonAnywhere.
Hey Arpan! I'm looking for the next step on this tutorial, basically trying to define a sqlite3 db to have a simple CRUD for users. I'd appreciate that knowledge, not necessary has to be recorded with a video. Any github/reference is welcome!
If i wanted to return an img url, how would i do that? Im new to python and I cant find any tutorials on how to do this. Btw, amazing video, explains things perfectly, had problems with CORS but fixed that easily.
You can send POST requests that contain data to an endpoint in the backend. The endpoint can then handle the data and do things like adding it to a database.
one of the best tutorials i've ever watched in general. everything is broken down so well and your delivery is perfectly concise. well done.
Thank you!!
@@ArpanNeupaneProductions Bro here You said arpan@Arpan-MBP React-Flask-Video % npx create react ct-app client.
What do we replace 'arpan@Arpan-MBP' I replaced it with my user data like this 'MyUSER@MyUSERworks doesn't work I even put the '-MBP' in front of the second MyUser it still doesn't work. Can you please help me with this?
@@cometolearn8598 you don’t have to do that. That’s just my computer stating that I am signed in as arpan on Arpan-MBP which is my laptop.
@@ArpanNeupaneProductions in windows when I do: 'npx create ct-app client' it gives the error:
npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MyUser\AppData\Local
pm-cache\_logs\2023-06-11T03_39_26_191Z-debug-0.log
@@cometolearn8598 That is because create-react-app has been deprecated.
Excellent content! As someone that loves using React but prefers Python for backend, this video is amazing. I did run into a CORS error when connecting the front and back-end. The fix was as simple as installing and importing Flask-CORS to my server.py. Thanks again!
Of course! Thank you so much for watching!
mee too, i dont know why. but this can affect security no?
Thank you, man! I'm from Brazil and don't found nothing in my language so good like this video. You Are great!
You are freaking awesome building and explaining react + flask as minimal as it gets!!!
Thank you so much!
ive watched 3 or 4 other videos trying to get this to work and finally got it thanks to yours. well explained and walked through! thanks!!
Glad it helped
Finally one Tutorial That connects the flask and react and it happens on my system thanks for the tutorial.
awesome video man! I'm new to this stuff and your content really helps me. I wish I new about your videos before I started a project as I would have progressed a lot more. Either way, I really appreciate the content you make.
recently one of my best friends from high school passed away and I wanted to make something in memory of him and I thought that making a website would be the best for him. Your videos have really allowed me to accomplish my goal. He was like a brother to me and because of you I can become closer to him. Thank you!!!!!
Thank you so much for your support and taking the time to write that. I really appreciate it! Also, I'm very sorry for your loss.
How far a you now ?
If anyone is getting a proxy error with ECONNREFUSED. Then just restart the frontend.
Thanks for sharing!
@@ArpanNeupaneProductions not working =\
Could not proxy request /members from localhost:3000 to localhost:5000/
@@xfirexfirecun9672 I am getting the same error. Have you found a solution?
Wow I was stuck on this for hours. Thank you!
Great video, this really helped me out. Python is new for me, and I wanted to jump into it by making a web app. This gave me a great start, it was so easy to follow
so good, the best tutorial I managed to find for my project
Thanks for the great feedback!
Great video, an issue I was running into was using localhost for the JSON file, and so when I replaced localhost:3000 with 127.0.0.1, and after loading Localhost:3000 this seemed to work. Awesome job!
Much appreciated. I have been thinking about this for a while. Really nice to see someone explaining it crisp.
Man, so simple and easy. This is bang on! Love it
This is the type of content no one makes and literally very important, keep up the good work, can you make a video on how to integrate flask with react native
please help me with this error im stuck for ine day " JSON.parse: unexpected character at line 1 column 1 of the JSON data"
Simple, to the point high quality content. Loved it!
Thank you!
That was great!
Really helped me.
You've just got a sub!
Keep it up :)
I’m glad and thank you!
Now this tutorial is one of my core memory
All concepts got ingrained ♥️
🎯 Key Takeaways for quick navigation:
00:29 📁 *Created a folder named "flask-server" for the Python backend, then generated an empty file "server.py" within it.*
01:20 🔄 *Created a React app using `npx create-react-app client` for the frontend in the "react-flask-video" folder.*
02:23 ⚙️ *Configured the backend by creating a virtual environment, installing Flask, and setting up a basic Flask app with a route returning a JSON array of members.*
04:41 🗑️ *Removed unnecessary files and configured the frontend's `package.json` to proxy requests to the backend running on `localhost:5000`.*
05:52 🖥️ *Modified the frontend's `App.js` file, using `useState` and `useEffect` to fetch backend data and display it on the frontend.*
08:35 🔄 *Successfully fetched backend API data, displayed "members" on the frontend, and handled loading state during API request.*
Made with HARPA AI
huh python is pretty sweet I shouldve been using this for my backend a long time ago lol. awesome tutorial man simple and very quick
Thank you!
Do routes need to be registered or something? I have the exact same thing you have here at the4 beginning, but I get a 404 when I go to /members.
Simple and to the point with fabulous explanation ❤
Glad you think so!
Hey, I needed a little help. Even though the members array is showing in my console, but in the web page it is still showing "loading..." Can anyone help me with this? Thanks a lot!
Not too much, not too little. Fantastic tutorial, thanks!!
Amazing video, many thanks!!! Keep doing this great job.
Please help me I cannot see the return api in local:500. "This site can’t be reached localhost refused to connect." is all it says to me
great option to just understand basic seting up the projetc! thanks!
You’re welcome!
Hi thanks for the video. I wonder how you install the autocomplete? I tried snippet installed but it seems not working thank you.
Simple, good explanation! Thanks man really helpful :)
Appreciate it!
Really amazing and easy to follow, just one question, If a user uses the network developer tool, The backend API can be exploited and scraped, How can We hide it, or avoid this situation
This is insane...! Thank you so much from Korea.
In only 10 minutes, impressive!
Thanks!
Hello. But how will be get the url parameters from backend... e.g. in flask route and how can be reflet that in axios...?? thanks.
Thank you very much for your video ... But I have a question ... how do you deploy the project? above all I would like to know how to do in windows server for example .... greetings.
You're welcome! I haven't deployed to a Windows server before so I'm not sure. Maybe try looking up documentation for it or finding some videos that may provide you with information?
Short & concise
This is my first time as a backend dev understand how frontend gonna use my data in reactjs
... thank you
This is very useful in every way. Thanks for the video!
Actually it helped me a lot, thanks bro
venv is just for consistency of environment?
How will i protect
For those having problems, spefically
import "flask" could not be resolved from sourcePylancereportMissingModuleSource
import "flask_cors" could not be resolved from sourcePylancereportMissingModuleSource
YOU MUST do pip install flask, and flask-cors BEFORE, BEFORE you activate the virtual environment! I spent so long trying to figure out why i was getting this error, and I JUST DISCOVERED IT.
Then in your virtual enviorment install them as well.
Hello! im a beginner. and I have a question. Why does the blank array in 8:31 makes the code to run only once? why is that? Thankyou!
Check out my video on useEffect
bro in the end the console is showing the following error caught (in promise) SyntaxError: Unexpected token '
have you figured this out?
try restarting everything. then start python server, then start react. for me it worked
what's the plugin you're using that shows you the size of the react import or whatever? as well as the one that allowed the quick sample upload? I tried and those features didn't work for me. But tutorial is overall good and concise, love it
The video was awesome! Could you tell me how react knew that the port of Flask was 5000?
Thanks! React knows that the port was 5000 because of the proxy that was set in the package.json file in the frontend.
@@ArpanNeupaneProductions Thanks for the fast response! Have a nice day
@@antoniomatos5540 You too!
thank you so much for such a precise video, that is efficient and succinct
Do you have to do something specific to deploy it? I mean, have the Python back end and Flask front end running in the server.
Thanks for the video! Your content really helped me.
Despite having configured the proxy correctly, it still makes requests to port 3000 instead of 5000 when checking on the dev tools network tab. Any idea why is that?
Is your server hosted on port 5000?
@@ArpanNeupaneProductions I had to replace the localhost on the proxy with 127.0.0.1 to make it work. Thank you anyway!
@@mateuspokemon01 this fixed it for me
hey i tried it and this error came : I know this is minor problem but as I'm new to react i cant figure out why and where it parsing html as json instead of accessing members
SyntaxError: Unexpected token '
did u solve the error if so please help im stuck
Hi Arpan, thank you for the great tutorial. I am using a Mac just to familiarise myself with this OS. Two questions please. 1) I can only find debug console. I can't seem to see the Console where the object can be printed. Secondly I am not entirely sure why the app only shows Loading.... I don't understand why it is undefined. The browser returns results but something is missing.
import React, {useState, useEffect } from 'react'
function App() {
const [data, setData] = useState([{}])
useEffect(() => {
fetch("/members").then(
res => res.json()
).then(
data => {
setData(data)
console.log(data)
}
)
}, [])
return (
{(typeof data.members === 'undefined') ? (
Loading...
) : (
data.members.map((member, i) => (
{member}
))
)}
)
}
export default App
Can you share the code in your Python file?
The front end port might be taken by another task. free up the port and it will work.
How would you "build" the app and launch it on the web, as it is right now for example, for example to Heroku
Here proxy has been set for localhost. But if I want to deploy it, what should I replace it with?
Excellent job. This video was very helpful. Thank you.
Thanks for the positive feedback!
Hi Arpan, thank so much for your tutorial, it will help me a lot in my projects :D.
But, I have a question, what should we do if we want to deploy the project? Will they have to be separated? for example, flask in "pyhtonAnyWhere" and react in "Versel"? Or, can we keep them together? for example, together in "Vercel"?
Thank you for liking the video! I haven’t done a video on deployment because I’ve been really busy with school, but if you’d like to deploy a project like this, I’d recommend checking Miguel Grinberg’s video on it: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
@@ArpanNeupaneProductions :o Dont worry. Thank so much, I will check that tutorial
@@luisgranados2006 👍
I am having the same doubt
Like if i deploy an api and app at two different domains or something else
Keep creating awesome videos like this! You'll reach a lot of viewership in no time. Thanks very much!
Thank you for the support!
Very informative and easy to understand. Thanks
Glad it was helpful!
Basically there are 2 servers right? The nodejs server and then the python server? Or am I wrong?
so how to deploy that to netlify?
Hey, removing the logo and index files is creating a compile error. When I do not remove them, my app has a logo in the background. How do I fix this?
Pease help me with this Error, when test the fetch option.
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
i have the same problen did you find a fix?
@@iphoneUser564 If any one else has this make sure you are fetching data from the back-end and not the front-end
@@laycookie-f6i how do I know where I am fetching it from? I had to remove the "proxy": "localhost:5000" line from the package.json file and include a setupProxy.js file with http-proxy-middleware where I configured the target: "localhost:5000" and I'm still getting this "Uncaught (in promise) SyntaxError: Unexpected token '
This was an awesome tutorial thank you very much!
Thanks!
@@ArpanNeupaneProductions would be cool to see how to deploy a project like this, I like the python react combo, seems to be a clean and clear environment.
@@JorgeBlancoPhotography I see, I haven't done a video on deployment because I've been busy with some personal projects. However, I would recommend that you check this video out to learn how to deploy a Flask + React App to Heroku: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
Hi, great tutorial Thank you! There's just one problem I'm having - I get an error in my localhost:3000 "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" and don't see the json that was sent. Do you have any idea how to solve this?
Hmm, do you have a link to your code? If it’s a SyntaxError then can you please check your code on the frontend side to make sure that it is the same as the code in the video?
Stop react and restart again problem will be resolved
I ran into a similar issue. The request to the server was refused because of CORS. In your server, run "pip3 install flask_cors", then in your server.py import the cors (from flask_cors import CORS), lastly insert "CORS(app)" under the app declaration. This will allow your react project to make Cross-Origin requests.
@@nathanseals4819 i had a similar problem, i tried to follow your suggestion and apparently it works. Thank you for helping me
sorry i'm not fluent in english
@@radhesaini9689 Thank you bro. I spent 2 hours solving this issue and then just restarted server work for me
Excellent tutorial. One question: If I wanna deploy it, what do I put in the proxy? My APIs public IP?
Hello, this is the most useful video I found, but please make a video on how to setup a group project, like one person does backend and one does frontend
Thanks and stay tuned!
Can i host it on netlify
hey, I am following it, for some reason not able to fetch the data on my console and so on the front end, any help?? what I am doing wrong here
Send me your code
Your keyboard sounds amazing
Hello bro i need to contacts on some flask issue , for most commands it is showing object not found and commandnotfoundexception , i think you can help this
Perfect explanations here.
Can they all work on single server, i am looking for running a landing page using flask itself
Are you trying to have just Flask and HTML ?
hello, can someone help, I added proxy to package.json, but my react app still points to localhost 3000 and cannot find data
So great logic to get the API, but how to use it to make a application? Thank you. Can I should normal react application to use this API? Thank you. It's like, if I'm gonna make some input, how can I make sure the input data that will use the API to go to be in the database? Thank you so much.
Yes! This API can be used in a real application. If you want to receive input to a database, you can make forms in React to type input into. Then, you can store the value of each input form in a variable and send that variable through a post request to the backend using Axios. In the backend, you’ll just have to set up routes for that post request and you can access the data that was sent from the frontend and use it however you’d like.
Hi, Could you mention the theme which you are using in VS Code, cause its awesome!
I was using the Panda Theme in this video
Thanks for the tutorial.... But my python code needs input when you call it, which I'll be obtaining from the frontend...so how can i make the call to the api which needs an input to output data...
Also if i have my project on say pythonanywhere or heroku, should i follow the same steps shown here ?
Can you further specify what you're trying to do so that I can better assist you? Are you trying to get data from the frontend such as the input entered in forms and receive that same input in the backend?
@@ArpanNeupaneProductions Yeah mate, basically I'm making a youtube analytics website, like getting playlist length etc... I'm working on my frontend with react js, so I'll be getting some input from the user such as the playlist id, etc..
then i want to take all that arguments and call my python api which will have different classes for fetching different data from the youtube api...so basically i just needed to know how can i pass those arguments to the python api from the frontend.
(When I'm going to push it in production, I'm going to host my frontend on vercel and on my Python api on heroku)
@@pshr2447 I see, in your frontend with React, you can send those input values to the backend with Axios by sending POST requests. Your backend will then catch those POST requests and then get the request body with the input values and you can use them however you’d like :)
Hope this helps!
@@ArpanNeupaneProductions thanks for the suggestion, I'll check out axios right now
@@pshr2447 No problem!
it gets console logged twice for me, why do you think this is happening?
Hi. Where is the venv creation for windows?
hey, when i run it after doing the java function to fetch the json, it outputs res not defined, however i copied everything you did
Send me your code
@@ArpanNeupaneProductions I have the same problem
Bro demand of react + python ?? From company side. Is it worth learning in 2021
React is the most popular frontend library and is used a lot. Python is great as well and is great in machine learning, data science, AI, and web development and they can both be used to create great applications.
Now, I don't know about companies since I haven't worked at any because I'm only 13, but I'm sure some companies do use them. Larger companies might also use them along with other languages.
Will react forward all the sessions to the browser?
Can you please clarify what you mean by forwarding all the sessions to the browser?
@@ArpanNeupaneProductions Yes, Does it do that?
this got me confused: if I remove line that checks whether data.members is defined or not, then i got error message 'map' is undefined. Does anyone know why?
simple and clear .Thanks
Thanks for the video. I get an error when mapping data.members in react. 'Property "members" does not exist on type '{}'.' Can't find any good answers on Google :/. Any advice?
Can you share the code?
@@ArpanNeupaneProductions It's the same as yours only I'm using typescript. I think there's an interface involved
@@christophernoble8284 I see, is the backend the same?
@@ArpanNeupaneProductions Yeah I figured it out. With typescript I have to explicitly define data types of incoming json elements in an interface, before I can map. More confusing. Great video, I'm just using a different environment
@@christophernoble8284 Sweet! Good luck with your project :)
Please am completely new to js i want to make gui for my API
it is basically a webview that will load a website with custom cookie's, i have no idea how to do it with js, is it even possible. Do u recommend any documentation
can we use it for mobile apps (react-native)
Yeah. Since both React Native and React use JavaScript, you can do the same thing.
Do we *Have* to create a virtual environment in order to make a connection between the front and the back end?
That's the only step I omitted, and I'm getting this error in the terminal when I run the React app :
Proxy Error: Could not proxy request /members from localhost:3000 to htttp://localhost:5000/
and on the browser itself, it gives the following error:
JSON.parse: unexpected character at line 1 column 1 of the JSON data
any help?
That video helped me solve the issue: th-cam.com/video/N4yUiQiTvwU/w-d-xo.html
Can we not do this in jquery/plain js ajax at client side,,,, I’m still not getting why separate instance for running react when you can do same thing with ajax. Please correct me / help me understand this better
Can you specify what you're trying to accomplish?
Thanks. Super helpful and clear!
What theme is that ?
Which VSCode theme are you using bro its really cool?
I’m using the Panda Theme
@@ArpanNeupaneProductions Thankyouuu I love this theme!!!!
@@aryanpanwar6399 👍
@@aryanpanwar6399 You're welcome :)
Short and sweet. thanks
do i have to install flask again n again for every new project?
No
What would need to be done to web host this (say on PythonAnywhere lol), just change the address of the proxy in the package.json file ?
You'd first need to run 'npm run build' in the frontend and serve the index.html file in your build folder in your backend in order to deploy to PythonAnywhere.
Hey Arpan! I'm looking for the next step on this tutorial, basically trying to define a sqlite3 db to have a simple CRUD for users. I'd appreciate that knowledge, not necessary has to be recorded with a video. Any github/reference is welcome!
If i wanted to return an img url, how would i do that? Im new to python and I cant find any tutorials on how to do this. Btw, amazing video, explains things perfectly, had problems with CORS but fixed that easily.
Why it is show error for html doctype error
Arpan, do you have any tutorials or know of any where I can put my python backend + react frontend on a ubuntu server using NGINX?
Everything work perfect locally, I would just like to transfer what I have onto a server, I am using a digital ocean ubuntu server with nginx.
Unfortunately, I do not. Maybe watch this video to see if this helps: th-cam.com/video/KFwFDZpEzXY/w-d-xo.html
sir i have created a python code which convert sign language to text ... can u pls help me to create a website like the one above
This was a great video! Would you be willing to do one on how to host it using a cloud provider like AWS or GCP?
How can I update the backend from the react app? add a new member or delete one. Is it possible? Thanks.
You can send POST requests that contain data to an endpoint in the backend. The endpoint can then handle the data and do things like adding it to a database.