Python Flask, React Hooks & MongoDB CRUD

Подписаться 261 тыс.

Просмотров 64 тыс.

50% 1

Este es un ejemplo Práctico de Python, React y Mongodb, en el que crearemos una aplicación web CRUD. para eso usaremos Flask como framework de backend y los hooks de react para el desarrollo de la interfaz de usuario.
CÓDIGO DEL PROYECTO
github.com/Faz...
CURSO DE PYTHON
• Curso Python para Prin...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
CURSO DE MONGODB
• MongoDB Curso, Introdu...
MULTER, SUBIDA DE ARCHIVOS CON NODEJS
• Subida de Imagenes en ...
CURSO DE EXPRESS
• Expressjs | Nodejs Fra...
VARIABLES DE ENTORNO NODEJS
• Variables de Entorno e...
CURSO DE JAVASCRIPT
• Curso Javascript para ...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
SE UN MIEMBRO DEL CANAL:
/ @faztcode
FAZT - RU-vid:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com....
#python #flask #mongodb

Опубликовано:

23 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 137

@crisslemans 4 года назад

Fazt amigo, quiero decirte que no sé que sea lo que te motive para subir tantos vídeos y tan buenos pero de verdad estás impactando vidas. Te cuento que entré a una empresa a hacer mis prácticas profesionales y debido a la situación actual la empresa comenzó a adelantar proyectos y hacer varios ajustes administrativos, por lo que me preguntaron si además de saber Python que fue el lenguaje por el que entré y qué tu me enseñaste, me preguntaron si sabía react para así ofrecerme un puesto de planta en la empresa y gracias a que aprendí este stack contigo conseguí ese trabajo, no sabía cómo agradecerte hasta que me di cuenta que me puedo unir a tu canal pagando una suscripción, sé que con eso no alcanzo a agradecer el favor que me hiciste pero por algo se empieza y si en un futuro o ahora tienes algún proyecto créeme que te apoyaré como pueda. Saludos y mil gracias.

@theframeworksupport7393 4 года назад

pidele su cuenta de paypal y hazle una donación

@gafelectronic 4 года назад

Yo tengo las misma palabras de agradecimiento .

@yhormanlopez7237 4 месяца назад

Aunq lo vi 4 años después q lo hiciste me sorprendo lo sencillo que lo haces ver así q lo intentare gracias por tu aporte estuvo buenísimo

@thunderstack5365 3 года назад

I can't understand your language but I followed your video steps and it worked Saved lots of time

@aldorsan 3 года назад

Excelentes tutoriales en general caballero. Explica lo justo y necesario y es conciso como una patada ninja. Espero que nunca se le vayan las ganas de enseñar/refregar sabiduria por los rostros de nosotros, los pobres plebeyos.

@jotasenator 4 года назад

acabo de ver tanta maestria en un solo video, tantos detalles, que estoy seguro que aprender aqui impulsar'a mi carrera..gracias

@BlackCode2777 3 года назад

Este tutorial foi o melhor tutorial que já vi aqui no youtube! muito bem explicado a qualidade do vídeo muito boa, com letras em tamanho perfeito! cara parabéns!

@websonic7810 4 года назад

deberias postularte para el youtubeer del año, te lo mereces.

@RandomMusicD 4 года назад

Que mal solo puedo darte un like por vídeo, pero déjame decirte es increíble la cantidad de conocimiento y la forma tan sencilla en como lo explicas, gracias porque me estas ayudando bastante, yo en cuanto tenga la solvencia económica me uniré a tu canal, para regresar un poco de lo mucho que estas haciendo por mi y por todos los que te seguimos, varios de mis proyectos no podrían ver la luz sino es por ti.

@vladimirgutierrez7 3 года назад

No lo puedo creer. Vengo mirando tus videos hace como un año, los practico, lo sigo, PERO no estaba suscrito. Que falta de respeto la mía. jejje, Listo, suscrito, campanita, y like. Gracias Fazt por este contenido.

@newsta88 4 года назад

Excelente, cuando puedas unos de react con django

@ego_sum_liberi 4 года назад

Seria genial!!! 👍 I second that!

@louiseavilezx2b505 2 года назад

Yo estoy buscando este por todos lados pero no encuentro :''( Fazt Code te lo ruego

@manuelludena9400 2 года назад

EXCELENTE TU EXPLICACIÓN !!! ERES MUY BUENO CON ESTO. SOY UN PROGRAMADOR ANTIGUO DE LA VIEJA ESCUELA JJJJ, ME GUSTA TUS VIDEOS.

@fabribarreto14 3 года назад

Este proyecto fue el mejor plan de sábado a la noche. Gracias infinitas Fazt!

@marcelopaciulli5967 2 года назад

Muy buen video, en tan poco tiempo un buen proyecto para CRUD con Python, Flask, MongoDB y React. Felicitaciones! He visto que en el handleSubmit(), cuando queda sólo un registro, lo edito, guardo los cambios y luego elimino el registro, sucede que no puedo crear uno nuevo, porque la variable "editing" quedó en "true", y no se consigue ingresar al condicional para la creación del registro, con lo cual, haría falta agregar un setEditing(false) al terminar la sentencia condicional, de esta manera (se puede agregar debajo de los demás set, por ejemplo): setName(''); setEmail(''); setPassword(''); setEditing(false);

@marccmartian 3 года назад

Buen video Fazt, me sirvio mucho para entender Flask. Tengo una sugerencia en el minuto 1:18:18, en vez de llamar nuevamente el metodo 'getUsers()', hubieras pasado 'users' al array de dependecias del useEffect, seria mas eficiente pues ya no haria nuevamente una llamada a la API, si no que al cambiar el estado del array users, se renderiza otra vez.

@paulofpaez 4 года назад

Mil gracias excelente por compartir tus conocimientos, esto muestra que sos una gran persona, Fazt.

@YohGar2854 2 года назад

Si están usando la ultima versión el Switch no le va a funcionar ahora lo subtitulen por Routes y el component por element su codigo de inicio quedara asi : import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' import Abaut from './components/Abaut'; import Users from './components/Users'; function App() { return ( ); } export default App;

@ivanzambrano4009 Год назад

Gracias @h2kblacknet955

@darkuzdenta819 2 года назад

excelente con tus videos hago una quimera padre padre jaja, saludos

@santiagosonora4373 2 года назад

muy bueno, faltó un botón de Cancel para cuando se selecciona Update y se quiera volver a agregar sin editar, pero es simple. Gran tutorial, Gracias!

@uykerrykaberga 2 года назад

increible el tutorial, me sirvio mucho... aprendi de varios temas y en conjunto con la documentacion de sqlalchemy, pude hacer el proyecto con una base en postgresql, me suscribo....

@isokchristian6936 3 года назад

Fazt eres un grande !!!! gracias a ti logre entrar hacer practicas.

@carlosmiguelherrera1700 3 года назад

El error de cuando pones el código del botón edit en el de borrar es muy gracioso ahahah xd por cierto gran tuto, gracias!

@pabloringler8341 4 года назад

Hola Fazt ,primero que todo quiero agradecerte con que subas tanta información y de manera super entendible sobre programación web , es posible que realizaras este mismo contenido pero sobre el uso y manejo de archivos( imagenes, pdf etc) en el backend con crud usando flask y poder mostrarlos en un frontend y de nuevo muchisimas gracias.

@shairdev 4 года назад

Ya me ví hasta los videos que subiste por error xd

@FaztCode 4 года назад

@josealfredochavarria9318 4 года назад

@xtkj301x 4 года назад

De que trataba el otro vídeo?.

@GamersNautas 4 года назад

Exceletente video, lo he estado poniendo en práctica y me ha venido todo esto super bien. Lo que si me gustaría saber es como hacer una especie de login desde la API. He podido hacerla con Flask-HTTPAuth pero no veo la manera de hacer el logout. Me gustaría un vídeo de estos, ya que es más práctico viniendo de ti.

@arun7pulse 2 года назад

I don't understand your language. Still I watched and learned and tried the code. you did well.

@cesarceledon6786 4 года назад

Hey Fazt no me voy a cansar de darte las gracias, no te conozco y siento que te quiero que EXCELENTÍSIMO contenido muy practico, claro etc... Etc... Dejame tu nombre para hablarte por tu nombre.! Nuevamente muchas gracias gracias...

@elvis_gastelum 4 года назад

Justo he estado aprendiendo react este mes, ya lo mire completo el video, y he de decir que estuvo sencillo (anteriormente hubiera batallado en asimilarlo, pero en esta ocasión no)

@roland6965 3 месяца назад

Gracias, justo lo que buscaba

@ruthcodina874 3 года назад

Yo cuando el update, Teno el código igual, y no me deja actualizar si envío solo un dato, tengo que enviarle todos los datos para que actualice, alguna solución?

@juliovalencia7324 3 года назад

primero que nada, Gracias! Segundo, me sale un error siguiente: Solicitud de origen cruzado bloqueada: La política de mismo origen (Same Origin Policy) no permite la lectura de recursos remotos en localhost:5000/prospectos/evaluacion/. (Motivo: La respuesta CORS no tuvo éxito). en mi api la hice con FLASK y se supone que ya tengo el CORS. CORS(app) cors = CORS(app, resources={r"/prospectos/*": {"origins": "*"}}) no sé sí puedas ayudarme.

@juliobar 3 года назад

fijate que este bien en Users.js, cuando hace el POST, que los campos del body coincidan con los de tu DB

@josbexerr5166 4 года назад

gracias Mister fazt....a divertirse... a codear en pycharm... a ver si lo adapto a django...

@carlosandresmorenoalvarez9961 3 года назад

pana sos buenísimo, lo felicito, y le agradezco, genial ese video, entendí perfectamente

@ipkickss 2 года назад

Tengo una curiosidad, se puede puede correr la API y el frontend juntos? osea, sin tener que correr primero la app de Python y luego elnpm start, sino los duos juntos al mismo tiempo.

@FaztCode 2 года назад

Si es para desarrollo lo que podrias hacer es usar una biblioteca como concurrently la cual te permite ejecutar el comando de Python y el de react en un mismo comando: www.npmjs.com/package/concurrently Y si es para producción, es decir quieres desplegarlo en alguna nube, lo que harías es hacer un build de react: npm run build y los archivos generados servirlos con flask, desde la carpeta static.

@mtapia197 4 года назад

Fazt, eres realmente bueno amigo.. sigue asi..!!!

@jismaelcr 4 года назад

Joven muy agradecido con sus videos, pero encarecidamente le pido que por favor haga videos con impresión...

@werokrush 4 года назад

Eres el mejor!!

@alidp86 4 года назад

Excelente contenido, muchas gracias por compartir!

@alejo319 4 года назад

primer comentario, gracias por el video

@davidibito6458 3 года назад

excelente como siempre , soy un poco nuevo , pero ya se todo los basico estoy buscando subir de nivel y publicar un proyecto entero que segun mi cabeza va a ser medianamente grande , podrias hacer algun video de como pubicar un proyecto igual a este , donde usa flask y reactjs , si bien ya vi y practique flask y reactjs por mucho tiempo nunca vi como subir un proyecto a un sitio de prueba y no he visto videos que lo expliquen de manera tan detallada como tu sueles explicar. acredito que mucha gente esta igual que yo , si no es molestia podrias hacer un video de ese tipo ? gracias por compartir todo tu conocimiento y usar tu tiempo para eso , excelente como siempre

@Vstosky Год назад

Entonces para hacer deploy como sería, se necesitan dos servidores?

@fersilent3884 4 года назад

Gracias Fazt excelente video

@martinv1123 4 года назад

Excelente! Explicas muy bien

@luis1558minecrafter 5 месяцев назад

siguiendo el tutorial el comando de mongo en consola no me sirve me sale ( "mongo" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.) y eso que a mongo lo tengo en el path

@michaelcastillo4402 4 года назад

Genial video Gracias por compartirlo.

@bored-monkey 4 года назад

JUSTO LO QUE BUSCABA

@nipoanz7865 4 года назад

Mongodb podria ser un db para el iot? O es mejor una SQL?

@shailonian2262 2 года назад

Hola, gracias por el video el mejor que encontré en internet. una question: Como me conecto a un mongodb en Mongodb Atlas, lo que cambia en el codigo?

@YasinAnatoli 4 года назад

sos un capo locooo!!!! en serio man graciass!!!!!!!!

@leoparaleo2 3 года назад

Tengo el siguiente problema: "Access to fetch at 'localhost:5000/users' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." Sera que alguien sabe por que sera?

@juliobar 3 года назад

En que momento?

@emrs94 4 года назад

mis respetos, eres el mejor

@aldorsan 3 года назад

Una consulta, muy boba perdón... pero podrías comentar que theme y syntax theme estás usando en el video?

@ikevin1992 4 года назад

Hola fazt, cuales son los plugins que usas para que te salga el autocompletado de las etiquetas html en los archivos js

@jrag-dev 4 года назад

Fazt excelente como siempre, será que compartes un video de react con django? Saludos

@edinmov 3 года назад

grande Fazt

@danielhuete8798 3 года назад

Perdón si este no es el mejor espacio para comentar pero, digamos que tengo dos valores en la forma y quiere mostrar en la pantalla como se vería el calculo de suma o resta de ambos sin meterlo aun a la base de datos? como recomendarían hacerlo?

@francostudio9767 4 года назад

Una pregunta, si quisiera mostrar los usuarios en la tabla, y solo los nombres en un sidebar (es decir otro componente) tendria que replicar el codigo de useffect en el componente sidebar ? se seguirian actualizando o tengo que ejecutar la consulta a la api en un componente superior y actualizar en cascada ?

@danielcastrorodriguez2400 3 года назад

Fazt amigo, muchas gracias por el video, una pregunta como se llama el tema personalizado que tiene tu windows??

@adrianfgutierrez2836 4 года назад

Excelente 👍🏾. Esperando con redux

@identiclla1101 3 года назад

Hola fazt saludos vuelve a subir python + react porfa eres un crack saludos

@juanjoseramirezaranda9670 2 года назад

¿dónde puedo encontrar los campos de python donde puedo aplicar?

@geal3817 4 года назад

Please sube un video de como personalizar windows como el tuyo me encanta el diseño que usas

@DPM-TI--MatheusAnalistadesiste 3 года назад

excelente curso cuando puedas unos de angular con java

@janatosdm1 3 года назад

hola buenos dias a m me sale el siguiente error 127.0.0.1:5000 Users.js:13 XHRPOST127.0.0.1:5000/users [HTTP/1.0 500 INTERNAL SERVER ERROR 37ms] Pedido de origen cruzado bloqueado: La política de mismo origen no permite leer el recurso remoto en 127.0.0.1:5000/users. (Razón: encabezado CORS 'Access-Control-Allow-Origin' faltante). Uncaught (in promise) T que estoy haciendo mal , el cors esta en app.py pero no se que sucede

@juliobar 3 года назад

Fijate en Users.js, cuando hace el POST, que los datos del body coincidan con los de tu DB

@carlosterrero2443 2 года назад

Muy buen video, la verdad es que todos los son. Pero Justo a partir de 1h tengo problemas de CORS, de hecho en 1h y 7segundo cuando hace la prueba que se está conectando a la API me da indefinido. ALGUIEN SABE ALGO? si... siempre me pasan errores raros.

@ramonalejandrojimenezramir347 2 года назад

fazt te agradezco la explicación excelentes videos , no se si me pudieras ayudar un poco en el minuto 1:34 , el metodo db.insert me manda un error TYPE collection cuando hago post desde postman, que pudiera estar sucediendo ya que hago los pasos tal cual los marcas, saludos , gracias

@juandiegolopezsalazar3916 2 года назад

Lo solucionaste?

@giovanymaldonado9859 2 года назад

Intenta usar la funcion db.insert_one deberia ser lo mismo tambien

@AndresGarcia-cg6ev 2 года назад

Lo pudiste solucionar? ... valido y guarda, pero no se porque dice que id no es una instancia de ObjectId, ni src... :/

@AndresGarcia-cg6ev 2 года назад

Al final del insert_one, ingresar el .inserted_id ... No es necesario ingresar el ObjectId

@yeye1447 3 года назад

tu que me recomiendas react con python o con el node js ?

@antoniodejesusfloresnunez3476 3 года назад

oye viejo tienes algun ejemplo que mediante un formulario por ejemplo "contactenos" envie un correo al dueño de la pagina?

@ral7458 2 года назад

Saludos. ¿Tienes algún video que explique como capturar errores? Este video está excelente pero no se cubrió el manejo de errores al hacer un request. Gracias de antemano.

@FaztCode 2 года назад

Se me ha pasado ese asunto en este video, pero es buena idea crear un video del tema. Voy a elaborar uno, mientras tanto te comento que puedes manejarlos simplemente con un try/catch.

@yeye1447 3 года назад

a mi me marcaba un error en la parte de traer una consulta y lo hice excatamente como tienes el de traer todos :p

@oswaldoflores3392 4 года назад

cuando voy a crear la carpeta del frontend, me tira este error -> Error: EPERM: operation not permitted mkdir'nombredemicarpeta' command not found: create-react-app... Necesito ayuda con esto.

@gatocode316 4 года назад

tal vez no instalaste el cli de react native

@angelmonje1418 3 года назад

Excelente video, alguien me ayuda con el siguiente error: Access to fetch at 'localhost:5000/users' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

@angelmonje1418 3 года назад

Solucionado con CORS(App)

@JoseAntonio-pb2cc 4 года назад

Grande, molaria spring boot con react y mongodb

@fabianjimenez749 4 года назад

Mil mil gracias

@Skeicee 2 года назад

Tambien sirve para los cors hacer un proxy en el archivo de configuracion de proyecto react?

@FaztCode 2 года назад

Si al final subes el proyecto de React con el mismo servidor de Flask, puedes usar los proxys del package.json, pero si los vas a subir por separado, entonces necesitaras configurar CORS

@victor-code 3 года назад

Hola maestro cómo podría subirlo a cpanel un proyecto react con django?

@adityaheart9671 3 года назад

Can you please make it in English?

@euforia_ 3 года назад

Un video de 1:34:20 de fast es como un curso de 40 horas es Udemy ajajajjaj, grande Fast

@diegocamilopenaramirez6101 4 года назад

Muchas gracias

@angelmosqueda4410 2 года назад

En el minuto 17:29 me marca error con el db.insert, ya intente remplazarlo con el db.insert_one pero sigue sin funcionar, alguien que le haya pasado lo mismo y lo haya resuelto? por favor

@juandiegolopezsalazar3916 2 года назад

Lo solucionaste?

@AndresGarcia-cg6ev 2 года назад

Al final del insert_one, ingresar el .inserted_id

@eduardoluiz5762 Год назад

estou passando pelo mesmo erro

@elsareyes-up4ih 4 года назад

¿Qué extensión se necesita instalar que autocomplete, por ejemplo cuando escribes "lorem"?

@gatocode316 3 года назад

Hola, tienes que agregar esta configuración en tu settings.json "emmet.includeLanguages": { "javascript": "javascriptreact" } nose muy bien de dónde sale el emmet, supongo que está incluido en alguna de las extensiones que tengo para javascript ("JavaScript (ES6) code snippets ", "ESlint")

@elsareyes-up4ih 3 года назад

@@gatocode316 Intentaré con lo que sugieres. Gracias!

@cer0tube774 4 года назад

Porque no creas un curso completo y lo subes a udemy??? Una especialidad por ejemplo... angular y haces distintas aplicaciones web con angular, con react igual, phyton,node,etc.. seria d los primeros en tomar tu curso

@SrErikCore 4 года назад

Cuál es ese tema del windows?

@akhmadfaizal7792 3 года назад

How fix cors policy :( cause i follow your tutorial and my chrome get info like that

@juliobar 3 года назад

Installing CORS module using pip install and importing it on app.py

@Poulzblogs 4 года назад

genial

@diemaidana1426 4 года назад

no me estas cargando en la base de datos

@iOSdeker19 4 года назад

Cuál es el tema de VSc que utilizas!!?

@acment 4 года назад

La extensión se llama Dobri Next - Themes and Icons , el tema es Dobi Next C01 Gray. Fazt habla sobre sus extensiones en el vídeo de mi configuración de VSC

4 года назад

Sos re capo, sabelo

@mariovilloria750 4 года назад

buenas noches, me quede trancado en la creación de la carpeta de frontend puesto que me sale el siguiente error: (" npx" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.). Si alguien tiene la solución le agradecería para poder culminar con todas las actividades del video.

@acment 4 года назад

Debe ser que no has instalado React ni Node

@CarlosSantana-mf9tl 4 года назад

Alguien me puede aclarar esta duda: si quiero separar las funciones que interactuan con la base de datos del app.py, hay alguna forma elegan de hacerlo? Lo único que se meocurre y me funciona perfecto es: import users as us ... @app.route("/"): def getUsers(): return us.getUsers()

@demotan9700 4 года назад

Si te refieres a modularizar, 1. Dentro de tu Folder ("app/") creas un __init__.py (esto es para que tu folder sea un paquete de python ) 2. En __init.__.py, importas a flask, flask_pymongo (aqui es donde haces las instancias) 3. Dentro del folder "app/" crear el archivo views.py (aqui pones todas las rutas), pero antes tienes que tener importado: from app import app, db

@diemaidana1426 4 года назад

alguno sabe por que motivo

@rohandevaki4349 3 года назад

sir, please put it in english, it will be really helpful, and please teach us slowly, it is very fast.

@weaponcode353 3 года назад

en localhost:300/about me renderiza ambos route , el de usuarios y about a la vez =S

@juliobar 3 года назад

fijate de tener bien function App() en Apps.js Router, Switch y Route

@edwinluisdiazcarrasco5543 3 года назад

Has uno con Django please

@pekuruguay 4 года назад

Faltaría un vídeo de cómo poner en producción en un servidor real. Xq no es facil

@saulmedina4473 4 года назад

@code_castle 4 года назад

cuanto nivel ... i.ytimg.com/vi/vdlLHXNd6MA/hqdefault.jpg

@angel-ns9hz 4 года назад

Enseña a usar pyenv

@rocastone1349 4 года назад

Grande! Grande! pero tengo problemas. tengo un error cuando ejecuto este comando: npm create-react-app frontend npm ERR! code ENOLOCAL npm ERR! Could not install from "Education\AppData\Roaming pm-cache\_npx\9964" as it does not contain a package.json file. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Studo Education\AppData\Roaming pm-cache\_logs\2020-09-17T02_17_42_551Z-debug.log Install for [ 'create-react-app@latest' ] failed with code 1 alguien me puede ayudar!!!!!!!!!!!!!!!!!!!!!!!!!!!

@rohandevaki4349 3 года назад

and sir please use mongodb atlas ,not mongodb local

@axeljacobo4453 4 года назад

porque me aparece este error? prntscr.com/rysoh7

@axeljacobo4453 4 года назад

ya lo resolví con este comando "Set-ExecutionPolicy -Scope LocalMachine unrestricted"

@danilorodas 4 года назад

lo que pasa que para iniciar el entorno virtual es .\venv\Scripts\activate.bat no con "/"

@motrapatoni 4 года назад

Hola, imagino que ya resolviste la duda, me paso lo mismo, me di cuenta de que la terminal integrada estada abriendo como PowerShell, al inicio de cada línea salía PS(PS C:\Users...) lo único que hice fue tipear Ctrl + C (para salir de lo que estaba ejecutando) y luego tipie CMD y entro(crud\frontend> cmd), ejecute nuevamente el comando del venv y pudo levantarlo sin problemas. Saludos.