MERN Stack Curso - Mongodb, Express, React y Nodejs, Parte 2 - Frontend con React
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- ¡Gracias a Kite por patrocinar esta sección del vídeo! Kite es un asistente de autocompletado gratuito con tecnología de IA que te ayudará a codificar de forma más rápida e inteligente:
Haz clic aquí ➞ bit.ly/3dPzXHe ➞ para saber más.
El Stack MERN, tiene como objetivo crear aplicaciones web modernas con Javascript como principal lenguaje tanto el Frontend como en el Backend y la Base de datos.
En este curso crearemos un aplicación CRUD que es una Single Page Application o Aplicacion de una sola página utilizando Reactjs. y esta estará alojada en un servidor Nodejs que usara Express como framework del lado servidor y Mongodb como Base de datos.
💻 Código de este proyecto:
github.com/Faz...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
Hostinger ➞ 7% de descuento en cualquier compra ➞Código: FAZT
👨💻 ¿Qué servicios utilizo?
Brave ➞ brave.com/faz053
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
SiteGround ➞ bit.ly/31u9ZEk
Namecheap ➞ bit.ly/3kne9W8
🖥️ Cursos:
Curso de Python Para Principiantes ➞ • Curso Python para Prin...
Curso de Raspberry PI ➞ • Raspberry Pi, Curso pa...
Setup Visual Studio Code ➞ • Visual Studio Code, Ed...
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ fazt@faztweb.com
➞ contact@faztweb.com
#react #mern #express #kite #javascript #mongo
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
para los que tengan problemas con babel en 2020
la forma de instalación cambio a:
Para el core:
npm install --save-dev @babel/core
Para dos presets:
npm i @babel/preset-react -D
npm i @babel/preset-env -D
asi quedo mi archivo de configuracion de webpack
webpack.config.js:
module.exports = {
entry: './src/client/index.js',
output: {
path: __dirname + '/src/public',
filename: 'bundle.js'
},
module:{
rules:[
{
use: 'babel-loader',
test: /\.js$/,
exclude:/node_modules/
}
]
}
};
asi quedo mi archivo de babel
.babelrc:
{
"presets": [ "@babel/preset-env", "@babel/preset-react"]
}
finalmente así me funciono
yo sigo con el problema intente dejarlo como tu, y sigo en la misma
te quiero amigo!. :D
gracias loco
sos un grande, gracias
gracias maquina 😎
Para las personas que tuvieron un error en la compilación con Babel en el minuto 18:15, les comento que con la versión de babel-loader superior a la 8 ya no se usa babel-core, sino @babel/core. Entonces para solucionarlo deben hacer npm install --save-dev @babel/core @babel/preset-env @babel/preset-react y en el archivo .babelrc usar en los presets [ "@babel/preset-env", "@babel/preset-react" ]
Gracias por el dato
estuve 3 horas reloj, muchas gracias
comentario justo a tiempo, gracias
Fue de demasiada ayuda tu comentario, llevaba horas buscando en google. Me salvaste, muchas gracias.
amigo mil gracias lelvaba horas tratando de solucionar este problema !!
hola fazt excelente tutorial, felicitaciones por tu dedicacion y gracias por compartir tus conocimientos, para los demas que esten viendo o vieron este video y les sale un error despues de instalar babel y configurar de nuevo webpack.config.js y .babelrc, es por que ahora en la nueva version de babel se lo instala asi : npm install -D @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader, y en el archivo .babelrc hay que poner esto : {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Muchas gracias por la aclaracion del error. Ahora me funciona perfectamente :D
Muchas Gracias
Muchas gracias!
señor lo amo
Gracias amigo!
Creo que es uno de los videotutoriales mejor explicados y más faciles de entender que he podido hacer en los últimos meses. Bravo!
de verdad que es el tutorial mejor explicado que he visto, infinitas gracias por compartir tus conocimientos de una forma tan entendible!🤩🤩🤩
Fazt, eres de otro planeta, no solo por el conocimiento, sino la manera como enzeña, gracias
Estoy muy satisfecho con el curso, espero que siga habiendo contenido como este, muchas gracias por el curso fazt :)
En el minuto 16:25 se crea el archivo .babelrc, luego de crearlo me dio un error y lo corregi reemplazando el contenido por
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Muchas gracias!
muchas gracias amigo me sirvió mucho
Se requiere de instalar tambien npm install @babel/core babel-loader @babel/preset-react @babel/preset-env -D, no me funciono solo con cambiar los presets
@@walemfly hola te funciono? yo instale como vos decis y ademas cambie los presets pero me manda esto
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Developments\DesarrolloWeb\mern-stack-task\src\app\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:13):
@@tobiaspossetto10 hola Tobías, yo tuve el problema también con eso e instale así: npm install -D @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader. Después si, cambia el archivo .babelrc de la siguiente manera: {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Ahí a mí me funciono y por lo que vi es un error por ser una nueva versión de babel. Espero te sirva, Saludos
Muy buena la integración. Obviamente es del 2018 el video y han surgido algunas actualizaciones a considerar. Tal vez ya hayan publicado algún video de actualización y de mejora en la forma de estructurar el proyecto. Muchas gracias por compartir
Buenos Dias Fazt, excelentes cursos que brindas, vengo de mi carrera Terciaria de Desarrollador y solo vi un poco de C, Java, Ruby y PHP con Laravel, y con tus Cursos pude ampliar mis conocimientos y entender cosas que hacia de memoria, ja, pasando del Stack Lamp a otros Stack nuevos. Muchas Gracias por los cursos ayudan mucho a entender las nuevas Tecnologías. P.D: los estoy viendo en Febrero del 2020.
Excelente curso Fazt. Felicitaciones. Haces unos cursos excelentes. Ya he hecho varios. Muchas gracias y que estés muy bien siempre!
Finalizado!! Excelente tutorial, aprendí mucho. Seria genial una continuación con Login y despegarla en producción, hoy no creo estar en condiciones de hacerlo por si solo, quizás más adelante.
Saludo. Yo lo que hice fue agregar @7 npm install babel-loader@7 babel-core babel-preset-react babel-preset-env-D para que el loader no sea 8 y me funciona todo bien según el vídeo.
thx friend :D it work!!
Tenkius
probare man ...si funciona desde ya el agradecimiento por compartir.
1) npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev
2) npm install -D @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader
entre tantas cosas que hice, esta fue la ultimas cosas que instale jaja imagino que esta fue la solución después de instalar no se cuantas cosas en el devDependencies jajajaj gracias!!! por favor nunca elimines este comentario seguro lo utilizare siempre jajaja!!
graciassssssssssssssssssssssss!!! había probado las soluciones que daban en los comentarios, pero esta es la que lo solucionó por completo, muchas gracias
me salvaste el curso, intente muchas formas segun los comentarios, pero me salvaste
GENIO! Gracias Fazt sos un genio
Muchisimas gracias, buenisimo curso, me sirvio demasiado, era exactamente lo que estaba buscando
Viejo sabes siento que te debo mi aumento salarial... gracias por tus tutoriales .. que Dios te Bendiga!!
Parabens pelos seus vídeos, vc é um ótimo instructor. explica Muito claramente, tem um excelente didática. não deixe de postar mais videos
hola de donde eres? yo soy de argentina
Para cundo la tienda oonline bro, eso se espera no se encuentra en youtube, con estas tecnologias
Lo acabe muchas Gracias me diste mucha visión de lo que tengo que seguir aprendiendo y ganas de seguir por la verdad estaba un poco perdido de que quería dedicarme en el futuro yo soy desarrollador PHP y mis aplicaciones siempre son grandes suelen ser usando Jquery pero me doy cuenta que el lenguaje JavaScript a evolucionado bastante y ahora practicar por que quiero tener una mejor oportunidad de empleo por que implementar esto en mi empleo actual lo veo complicado por que el equipo de desarrollo no saben estas tecnologías y pero si sacarle provecho a la manera de hacer las cosas con lo aprendido y seguir practicando.
Excelente Fazt 10/10 el tutorial, seria genial que lo hagas con las actualizaciones que hubo ahora :D
Muy bueno el curso, la verdad bastante claro 10/10.
Perdon pero leí por ahi un comentario de que no seas redundante, pero en realidad es excelente la manera en la que enseñas, pague Platzi y te entiendo mucho mas a vos, sos excelente enseñando, felicitaciones.
Excelente tutorial fazt, sigue así por favor, ayudas a muchísima gente bro
Gracias por ambos tutoriales! gran trabajo.
muchas gracias fazt son muy buenos tus videos, me gustaria un video donde explicaras como conectar el backend y el frontend hecho en dos proyectos diferentes con la api fetch
Buen dia.
En el minuto 17:56 al momento de ejecutar npm run webpack, me salia éste error:
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functioncón\CRUD MERN
ode_modules\babel-preset-react\lib\index.js
Solución:
Primero, se debe instalar los presets de env y react asi:
npm install @babel/preset-env @babel/preset-react
Luego de eso, en el archivo .babelrc, su contenido se debe cambiar por:
{
"presets": ["@babel/env", "@babel/react"]
}
Luego, en la carpeta public, se crea una carpeta llamada js, la cual contiene el bundle.js, por lo tanto se debe cambiar por esa ruta en el script del index.html.
Gracias Fazt, muy buen Curso.
gracias Fazt, tus cursos son los mejores
Excelente video!! Esperando el login con MERN, enhorabuena por tus videos
Buen video, Saludos desde Chile!
Puedes realizar sobre como implementar logins, que disponibilidades hay
Con la explicación del video tranquilamente podes crear un login, repasa el video del backend
Thank Fazt so much for your video tutorial , I liked it all. . I watch again and again it full detail and from step by step and easy to understand with example and practice ., although my listening low lever but I am easy to understand.
Muy buen video solo tuve un detalle:
no me estaban funcionando los archivos de babel así como tu los pusiste, en su lugar tuve que ponerlos de la siguiente manera:
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader core.js
y solo cambiar los nombres en el archivo de configuración de babel por:
{"presets": ["@babel/preset-env","@babel/preset-react"]}
todo lo demás igual
gracias por el video
Muchas gracias por este gran vídeo, me gusto la idea de agregar un login y validación a la API con JWT, pienso que también se podría agregar un modal para agregar y editar, o también agregar react router para agregar y editar.
Más adelante una paginación y un check cuando este finalizada la tarea. Etc.
Seguiré viendo tus cursos por que mi meta es conseguir un empleo con el stack MERN.
Mil gracias
Alguien me puede explicar porque integrar la parte de react dentro del mismo proyecto del servidor? es que no me funciona la ejecución del archivo bundle.js, y me parece muy tedioso tener backend y frontend en el mismo proyecto. Mi pregunta es ¿hay alguna desventaja en crear el proyecto de react aparte con el comando create react de facebook y desde ahi llamar al backend que hemos hecho aqui?
Genio!! Muchas gracias.. ¡Excelente curso!
En minuto 7.46, al ejecutar el comando npm run webpack manda error
Gracias fazt estaba esperando este curso desde hacía mucho tiempo
@fazt me gustaría mostrarte mi portafolio jilvisual.com para mi seria muy importante tu opinión
Hola Jilson, le echado un ojo, y veo que le has dedicado bastante trabajo a tu sitio. te recomiendo reducir el tamaño de la cabecera en las otras rutas de tu sitio que no es el contenido principal. por que me dio la sencion que el sitio no cambiaba, y en cuanto a la velocidad de carga, creo que puedes mejorarla, te dejo un enlace en donde lo puedes hacer:
developers.google.com/speed/pagespeed/insights/
copia y pega tu pagina y mira los resultados a medida que vas mejorando lo que te recomiendo el sitio. Un Saludo :)
Fazt gracias por tus recomendaciones, las tendré en cuenta para mejorar el sitio. Quiero hacer con el stack MERN un cotizador online para posteriormente generar las cotizaciones en pdf y así ahorrar tiempo. ¿Conoces de casualidad alguna dependencia para generar el pdf?
Eres de los mejores, muchas gracias.
la verdad es que si bien complicado para los primerisos en MERN son mucho conceptos y combinacion nuevas que se debe aprender soy un principiante abruma un poco. pero no me rendire vere mas videos y seguire otros cursos hasta que la constancia de resultados no se rindan
en ves de ocupar bind(this) en el constructor utilicen { (e) => this.method(e) } Saludos. EJEMPLO:
this.addTask(e) }>
me sirvió, muchas gracias
@@mabbyreznns4633 que buena !
Hola Fazt excelente! acabo de finalizar el curso de principio a fin, sería interesante el poder llevar esta aplicación a producción en un servidor como Digital Ocean, configurar/instalar mongoDb en Ubuntu , configurar nginx para poder dejar corriendo el nodo en el servidor y poder empaquetar el frontend, sería de lujo un material así.
No obstante, el presente curso supera todas mis expectativas a nivel técnico :D saludos.
GRANDE, mas claro imposible.
Para quien este viendo este video y quiera cambiar mongodb por mysql, es super facil... deben usar la configuracion de coneccion explicada por fazt, con el archivo key para los datos de la base de datos y en database.js la configuracion.. para el crud, en el archivo de las rutas cambiar las lineas tipo const tasks = await Task.find(); de mongodb por "const tasks = await pool.query('SELECT * FROM tasks');" de mysql y por ultimo en el boton de editar, si lo dejan tal cual les dara un arreglo y no el objeto solamente.. deben colocar data[0] para que selecciones solamente el objeto...
y por ultimo de igual forma para seleccionar cada dato del objeto, colocan por ejemplo id: data[0].id... pero es logico!! ustedes pueden!!!
Gracias Fazt
Excelente, muchas gracias por el aporte!
Excelente explicación, pero tengo una pregunta. ¿Cómo se podría cambiar el puerto desde webpack para que el front y el back no corran en el mismo puerto ?
Podrias crear todo el backend del primer video, sin la parte de archivos estaticos. Y despues haces el front con create-react-app por ejemplo. Eso si, tendrías que ejecutas ambas apps a la vez o vas a tener problemas. Suerte
Veo que para testear en vivo tenemos que decirle a webpack que haga un watch y ademas arrancar el server. No es posible hacer algo mas sencillo como los react-scripts o algo así? Me parece que eso solo se puede usar con create-react-app? Todo esto me tiene muy confundido. Esperar a que webpack compile es mas lento...
sos el MEJOR, muchas gracias.
Eres el mejor explicando! saludos... infinitamente agradecido. Si llegas a hacer cursos pagos, los pagaría jajajaja
Gracias amigo excelente tutorial, no tenia conocimiento al respecto de estas tecnologias
en el minuto 4:26 me sale este error al usar el npm run webpack
ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\destroy'
@ ./node_modules/destroy/index.js 14:17-30
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\etag'
@ ./node_modules/etag/index.js 22:12-25
@ ./node_modules/express/lib/utils.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\express\lib'
@ ./node_modules/express/lib/view.js 18:9-22
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\mime'
@ ./node_modules/mime/mime.js 2:9-22
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\send'
@ ./node_modules/send/index.js 23:9-22
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\ezio9\Desktop\Mern-stacks
ode_modules\express\lib'
@ ./node_modules/express/lib/request.js 18:11-25
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./src/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-stacks@1.0.0 webpack: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-stacks@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ezio9\AppData\Roaming
pm-cache\_logs\2020-07-30T02_24_36_928Z-debug.log
revisa que no te falte un '/' en el path o entry
Hola, eres genial, Dios bendiga ese don que tienes, de verdad muy pedagógico. Me fascinaron los vídeos desde hoy seguidora fiel... Me has ayudado mucho a entender esta tecnología, lo cual me permitirá realizar un mejor desempeño. Mil Gracias. Sigue con esta hermosa labor, tu contribución es muy importante y valiosa. Saludos desde Venezuela!!!
Muchas gracias,buen video, pero tengo aun una duda, como puedo solicitar mas datos a un servidor, con react hooks, sin necesidad de refrescar la pagina,
vídeo explicando el tema de CORS saludos!
En septiembre de 2021 para que funcione babel se deben usar los módulos: @babel/core, @babel/preset-env, @babel/preset-react
y pudiste hacer que funcionara el DELETE???
Segui los pasos y me tiraba un error, al instalar los paquetes de babel, me instala la ultima version de babel-loader@8.x, osea la version 8, y babel core 6.x, hay que poner " npm install babel-loader@7 " para q instale la version 7 y sea compatible con el core version 6.x
Fazt podrías hacer un vídeo comparativo sobre los distintos frameworks backend para node js y en que momento se lo puede utilizar ?? Express Sails Hapi Loopback etc.. :)
Muy Buena idea Juan Pablo, elaboraré algo pronto para subirlo :)
Fazt Buenaso!! :D :D
Espectacular este tutorial practico
He actualizado algunas funciones que no corren en la actualidad y lo comparto en github,
github.com/jjuribe/MERN-stack
Buenos Dias Jhovany, muchas gracias por compartir. Saludos.
Muchas gracias por compartir BUEN HOMBRE! me salvaste con un error que me estaba volviendo loco y era en la parte que no capturaba el /ID para poder hacer un update y faltaba colocar en tasks.routes.js y era agregar en la linea router.get('/:id' jaja me falta el " :id"
Con gusto
Podrias agregar un motor de plantillas para react?... Seria un gran aporte... Saludos!
Por este man veo cada anuncio hasta el final, tengo entendido que eso ayuda xD
Gracias Jhan :)
saludos, ahora estoy presentando es un inconveniente con la versión de react
le doy npm run dev y me corre bien pero en el navegador me sale por consola al hacer la inspeccion
Warning: ReactDOM.render is no longer supported in React 18.
alguin que me ayude por favor.
yo en vez de los estates así usaba usestate para los valores del login
Hola Fazt, por favor respondeme la sgt pregunta: ¿cual es la mejor manera de crear el proyecto debido a que la serie de videos sobre MERN con react y node.js de este año tu no usaste babel? yo pienso que mas practica y facil es seguir el orden que usaste en la ultima serie de videos de MERN.. el de la serie de 13 videos?
Quedo genial!
Eres buen profesor tio ;)
@Fazt: instalar las dependencias en desarrollo tiene alguna diferencia con instalarlas normalmente (sin desarrollo)?
Saludos, excelentes videos, he aprendido mucho, tienes uno donde enseñes relacionar colecciones de bd mongo , gracias
porque instalas webpack y babel solo para desarrollar? como se desplegaria esta app en un entorno de produccion?
muy bueno, yo lo hice con los hooks de react para no usar las tipicas clases
Tenes la parte de los hooks?
gracias, bendiciones.
hola! tengo un problema, podrian ayudarme?
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
esto cuando lanzo el comando npm run webpack
1:13:34 to see where i am going
Excelente!
Genial, podrías subir algo relacionado a deploy de una app en MERN a Heroku o un VPS?
Pues como es bastante pedido, voy a grabarlo :)
siii por favor!!
Me suscribo a la espera del video del deploy de la app!
que diferencia hay entre heroku y VPS?
hola Fazt te felicito por todos los videos que nos compartes realmente estoy aprendiendo mucho, tengo una duda en el minuto 46:46 envias por post el estado para su registro a la base de datos, pues hasta ahi todo bien XD , el problema es cuando recupero todos los registro de mi base de datos y les hago parte del estado, entonces cuando quiero realizar nuevamente un registro obviamente el estado contiene todos los registros por tal razon no me realiza el nuevo registro, como puedo solucionar esto??? quiza alguien tambien tropezó con este problema??? gracias de antemano
No sería mas fácil usar next?
hola fazt, primeramente excelentes videos, tengo un problema y no he podido solucionarlo, ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\Documentos\Desktop\proyectos cortos practica\MERN-PRACTICA-REACT-NODE-EXPRESS-MONGO
ode_modules\babel-preset-react\lib\index.js
ese es el error que me aparece cuando ejecuto npm run webpack
estoy siguiendo paso a paso tu video incluso copie de tu respositorio para confirmar algun error tipografico pero sigo teniendo el mismo error, ayuda por favor ! desde ya mil graciass
saludos existira una manera de generar generar el api y modelo vista controlador asi como lo trabaja cake php o laravel
Una pregunta en caso de que abra la app en dos pestañas, que tendria que hacer para que se refleje todos los cambios que haga en cada pestaña? es decir si borro una task en la pestaña "a" se refleje en la pestaña "b". Tengo que utilizar Websockets o Ajax?
una duda se puede utilizar el componente de react Router? es que me aparece Cannot GET / MiRuta
Disculpa, sabes por qué cuando borro una tarea de abajo, se borra la de arriba?
Muy buen video sigue así 😎
Fazt gracias por este video, está genial, quisiera hacerte una pregunta, al proyecto le agregué React Router y sirve si doy click a algún link, pero no sirve si por ejemplo escribo la url en la barra del navegador y luego le doy Enter, ¿sabes por qué pasa eso?
Hola, ojala leas mi mensaje... Para utilizar Material UI que configuracion extra es la correcta, solo la que indica la pagina de MAterial UI o hayalgo extra que se debe agregar
Hola que tal gracias por el curso, pero tengo duda, si en mi caso yo tuviera más cosas aparte de tareas tendría que crear un archivo de modelo para cada objeto digamoslo asi que yo fuese a guardar en la base de datos cierto? y luego todos ellos los pondria con app.use() en la parte Routes del index del servidor cierto? O como seria, tambien otra duda que me surge es si yo quiero que mi aplicacion sea nativa de escritorio con Electron todo lo del index debe estar en el index de electron para que funciones?
No me crea la carpeta de bundle.js, que hago copie todo igual el paso a paso
como valido el formulario a partir de lo que tengo guardado en el back para evitar guardar datos duplicados o realizar un combox dependiente entre otros
Podrías usar cassandra para el proximo crud de react? es brutal
Cómo la podríamos poner en produccion en un hosting?
alguien podria explicar mejor esta linea: this.addTask = this.addTask.bind(this)
@@andresdavidbetancourtsanta1659 gracias doc
Buenas tardes si tuviera que hacer un query para que al colocar una tarea si ya está me diga que ya esta en la base de datos ¿en que archivo iría?
Hola Fazt, he seguido los pasos, incluso he modificado de acuerdo a algunos comentarios que han realizado otros usuarios, pero me sale el siguiente error cuando corro npm run webpack:
Rafael@RAFAEL-PC MINGW64 /e/projects/crudUsuarios
$ npm run webpack
> crudusuarios@1.0.0 webpack E:\projects\crudUsuarios
> webpack --mode development
Hash: 16549ff45d3e3d5a7b7f
Version: webpack 4.43.0
Time: 211ms
Built at: 2020-05-24 10:02:06
Asset Size Chunks Chunk Names
bundle.js 7.06 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/app/index.js] 2.9 KiB {main} [built] [failed] [1 error]
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from 'E:\projects\crudUsuarios'
at Function.resolveSync [as sync] (E:\projects\crudUsuarios
ode_modules
esolve\lib\sync.js:89:15)
at resolveStandardizedName (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-descriptors.js:154:9)
at E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-descriptors.js:109:50
at Array.map ()
at createDescriptors (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-descriptors.js:101:10)
at presets (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-descriptors.js:47:19)
at mergeChainOpts (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-chain.js:320:26)
at E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-chain.js:283:7
at Generator.next ()
at buildRootChain (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\config-chain.js:120:29)
at buildRootChain.next ()
at loadPrivatePartialConfig (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\partial.js:95:62)
at loadPrivatePartialConfig.next ()
at Function. (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\partial.js:120:25)
at Generator.next ()
at evaluateSync (E:\projects\crudUsuarios
ode_modules\gensync\index.js:244:28)
at Function.sync (E:\projects\crudUsuarios
ode_modules\gensync\index.js:84:14)
at Object. (E:\projects\crudUsuarios
ode_modules\@babel\core\lib\config\index.js:41:61)
at Object. (E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:151:26)
at Generator.next ()
at asyncGeneratorStep (E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:3:103)
at _next (E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:5:194)
at E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:5:364
at new Promise ()
at Object. (E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:5:97)
at Object._loader (E:\projects\crudUsuarios
ode_modules\babel-loader\lib\index.js:231:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! crudusuarios@1.0.0 webpack: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the crudusuarios@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rafael\AppData\Roaming
pm-cache\_logs\2020-05-24T15_02_06_583Z-debug.log
Cómo solucionarlo?
Gracias,voy a desarrollar una app,algún consejo
brutal
Hola, como puedo agregar la configuración al webpack config para materialize
Hola, descargue el proyecto pero tengo un inconveniente en el archivo app/App.js cada que hago un cambio se daña la sintasis del codigo queda dando error, estoy utilizando visual studio code. gracias
en el minuto 17:49 me aparece este error como podria resolverlo
> src@1.0.0 webpack /home/oneall/mern-stack/src
> webpack --mode development
asset bundle.js 3.13 KiB [compared for emit] (name: main)
./app/index.js 39 bytes [not cacheable] [built] [code generated] [1 error]
ERROR in ./app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
Require stack:
- /home/oneall/mern-stack/src/node_modules/babel-loader/lib/index.js
- /home/oneall/mern-stack/src/node_modules/loader-runner/lib/loadLoader.js
- /home/oneall/mern-stack/src/node_modules/loader-runner/lib/LoaderRunner.js
- /home/oneall/mern-stack/src/node_modules/webpack/lib/NormalModule.js
- /home/oneall/mern-stack/src/node_modules/webpack/lib/NormalModuleFactory.js
- /home/oneall/mern-stack/src/node_modules/webpack/lib/Compiler.js
- /home/oneall/mern-stack/src/node_modules/webpack/lib/webpack.js
- /home/oneall/mern-stack/src/node_modules/webpack/lib/index.js
- /home/oneall/mern-stack/src/node_modules/webpack-cli/lib/webpack-cli.js
- /home/oneall/mern-stack/src/node_modules/webpack-cli/lib/bootstrap.js
- /home/oneall/mern-stack/src/node_modules/webpack-cli/bin/cli.js
- /home/oneall/mern-stack/src/node_modules/webpack/bin/webpack.js
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
at Function.Module._load (internal/modules/cjs/loader.js:730:27)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (/home/oneall/mern-stack/src/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/home/oneall/mern-stack/src/node_modules/babel-loader/lib/index.js:10:11)
at Module._compile (/home/oneall/mern-stack/src/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
webpack 5.37.0 compiled with 1 error in 166 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! src@1.0.0 webpack: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the src@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/oneall/.npm/_logs/2021-05-16T18_48_19_345Z-debug.log
Lograste resolverlo?
Con las nuevas actualizaciones de webpack-cli da error al ejecutar "npm run webpack", entonces para resolverlo: instalar con npm i webpack-cli@3.3.12 de lo contrario te instalará 4.0.0-beta.8.
- utilizar path.join(__dirname, '/src/public') y no path.resolve(__dirname, '/src/public') en node v12.16.3
- npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"]
}
Al 9 de Enero de 2021 la version de webpack cli es 4.3.1... estoy buscando solucion al error
@@juanvillalba7925 tienes que volver a la 3.3.12 y en esa te funciona