Hola 😀
Comparto el resultado
Repo: GitHub
page: Todo-App
resultado:
Primeros pasos con React
Cómo aprender React.js
Cuándo usar React.js
Cambios en React 18: ReactDOM.createRoot
Instalación con Create React App
Fundamentos de React: maquetación
JSX: componentes vs. elementos (y props vs. atributos)
Componentes de TODO Machine
CSS en React
Fundamentos de React: interacción
Manejo de eventos
Manejo del estado
Contando y buscando TODOs
Completando y eliminando TODOs
Fundamentos de React: escalabilidad
Organización de archivos y carpetas
Persistencia de datos con Local Storage
Custom Hook para Local Storage
Manejo de efectos
React Context: estado compartido
useContext
Modales y formularios
Portales: teletransportación de componentes
Formulario para crear TODOs
Quiz: Modales y formularios
Retos
Reto: loading skeletons
Reto: icon component
Próximos pasos
Deploy con GitHub Pages
Toma el Curso de React.js: Patrones de Render y Composición
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Deploy con GitHub Pages
22/23Recursos
Existen varias maneras para hacer deploy de nuestras aplicaciones, una de las más populares es GitHub Pages.
GitHub Pages es un servicio de GitHub que nos permite alojar nuestros proyectos y mostrarlos en vivo en una página web estática sin necesidad de pagar por hosting o tener conocimientos en servidores, aunque tiene algunas limitantes.
Para inicializar nuestro proyecto con Create React App, utilizamos el comando npm start, lo que hace este comando, es que iniciar un servidor de node.js para poder compilar nuestro código de React a JavaScript, también para poder estar al pendiente por cambios y refrescar automáticamente nuestro proyecto al hacer algún cambio, entre muchas otras cosas.
La principal desventaja de GitHub Pages, es que no podemos correr un servidor de node.js, solamente soporta archivos estáticos:
- HTML
- CSS
- JavaScript
- Imágenes
Para hacer el deploy de nuestra aplicación, necesitaremos hacer lo siguiente:
- Instalar la dependencia gh-pages con npm.
- Modificar un poco el
package.json - Y utilizaremos otros comandos de Create React App para construir una versión de producción de nuestro proyecto.
Instalar gh-pages
Para instalar esta dependencia en nuestro proyecto, necesitamos ejecutar este comando en la terminal, dentro de la carpeta root en la que está nuestro proyecto: npm install --save-dev gh-pages o npm i -D gh-pages que es lo mismo.
⚠️ Si aún no tienes tu proyecto en un repositorio de GitHub, es el momento perfecto para subirlo, con todos tus cambios.
Modificar nuestro package.json
Primero necesitamos agregar la regla como la siguiente:
"homepage":"https://tu-usuario-de-github.github.io/nombre-del-repositorio"
Para que funcione necesitas poner los datos necesarios en la URL.
Y ahora agregamos unos scrips de gh-pages para el deploy, estos scripts prepararán nuestra aplicación para el deploy.
Dentro de npm podemos utilizar los prefijos: pre y post para decir que ejecute cualquier cosa que queramos antes o después de ejecutar el script que necesitamos.
Nuestro package.json quedaría como el siguiente:
{
"homepage":"https://brandonargel.github.io/todo-app"
"name": "curso-intro-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
},
}
Deploy de nuestra aplicación
Ahora solo necesitamos ejecutar nuestros scripts: npm run deploy.
¡Al hacer esto, si no nos aparece ningún error, quiere decir nuestra página ya está en vivo!
Si te aparece algún error, no dudes en dejar tu pregunta para que podamos ayudarte, también puedes revisar los pasos anteriores o revisar esta Guía para subir tus proyectos de React con gh-pages{target="_blank"}.
¿Cómo puedo ver mi aplicación en la web?
Para poder ver tu aplicación ya en la web puedes entrar a la URL que escribiste en el homepage de tu package.json,
Otra forma es entrar al repositorio de tu proyecto en GitHub -> Ajustes, y en el menú de la izquierda, en Code and automation te aparecerá una sección de Pages, ahí estará un link para ver tu proyecto.
Contribución creada por: Brandon Argel.
Aportes 175
Preguntas 54
Ordenar por:
Aquí dejo la mía https://jairocamposruiz.github.io/task-list/
Hola! 😄
Yo decidí añadir dos funcionalidades más aparte de las que se trabajaron en el curso:
- editar todos
- eliminar todos los todos
Este es mi proyecto, está deployado en Vercel.
Hola [email protected]
Por acá vengo a dejarles una app sencilla de ingresos y egresos para controlar un poquito nuestras finanzas.
Trabajar con esta librería es simplemente maravilloso!
Este es el mío compañeros, logre hacer un challenge de frontendmentor todo con React
GitHub: https://github.com/EliabLM/todo-app
Live: https://eliablm.github.io/todo-app/
Aún me falta el light mode y agregar la funcionalidad de drag and drop
Hola anexo mi repo y mi deploy, hay una pequeña sorpresa para los amantes de dragonball…
Repo: GitHub
page: DragonBall-TaskList
npm i gh-pages -D
"scripts": {
//...
"predeploy":"npm run build",
"deploy":"gh-pages -d build"
}
Hola, aquí les comparto mi proyecto.
El deploy esta hecho con Netlify, solo es necesario enlazar netlify con github y realizar el despliegue en New site from github y listo!
Aquí mi repositorio por si desean ver los pequeños cambios.
Hola muchachones!
Aqui les dejo mi reto completado, el diseño y assets los encontre en la pagina frontendMentor, esta pagina te provee de los assets y colores necesarios para que solo te concentres en codificar 🙈, también le cambie un poco la funcionalidad:
1) le agregue la posibilidad cambio de tema entre claro y oscuro
2) La manera de crear los todos en un poco distinta, lo haces directamente desde el input… y la forma de eliminarlos es con un modal de confirmación(para que no se eliminaran directamente por si hay un miss click o algo asi)
3 La manera de filtrar todos, funciona por estados en los todos(todos, completados , y sin completar), pero me quede sin buscador =(
4 Agrege la posibilidad de reordenar los todos con un drag and drop(déjalos presionados para poder moverlos libremente por la lista)
Aqui les dejo el Site y el Repo:
Repo RepoApp
Live-Site TodoApp
Listo el Deploy!
https://gustavolando.github.io/introduccionareactjs/
Repo:
https://github.com/Gustavolando/introduccionareactjs
Le puse un scroll al “TodoList” para que no se pierda el “CreateTodoButton” cuando hay muchos todos, y también le puse un contador de caracteres al Todo para que no sean muy largos.
También usé el hook useRef para poner el foco en los input de texto del search y del textarea para el nuevo TODO.
Un mar de conocimiento adquirido con este curso!
Felicitaciones al developer chef!
Hola, les comparto mi proyecto, le agregue la opción de editar y quise probar una librería que encontré para facilitar el UI: https://v2.grommet.io/ (fácil de usar, recomendada)
Live
GitHub
Me siento feliz por el resultado 🥳
GitHub
happy-dijkstra-602915.netlify.app/
Mi resultado:
Repo: https://github.com/afbolivarg/to-do-wizard
Página: https://afbolivarg.github.io/to-do-wizard/
Les comparto mi proyecto del curso:
Repositorio: GitHub
Page: ToDo-Machine
Imagen de referencia:
Hello 😉
Comparto como quedo mi aplicación
Repo: GIthub
Page: App ToDo React
El resultado:
Le agregue la función Editar y responsive para movil. Me encantó el curso . Pronto subo el repo ;D
Les comparto mi proyecto 😁
Github
Deploy
Loading:
Ejemplo:
Me gustaría aportar que yo en lugar de Create React App utilicé Vite, y a la hora de hacer el deploy no me salía nada en Github Pages y era porque tenía que agregar en el archivo de vite.config.js
base: '/nombre-de-tu-repo/'
Y ya con eso todo bien 👍
Un datazo curioso: En homepage si colocas
"homepage": "."
El deploy funcionará igual 🤔 . Sin no especifican el homepage, se hará un desastre xd Es importante indicarlo
.
Hace meses traté de hacerlo con el npm de github (como mostraron en la clase), pero me perdí y nunca me mostraba el resultado que queria.
.
Solo hacia manualmente npm run build y lo desplegaba en Netlify
Repo: Github
Live: GithubPages
.
.
.
.
Comparto mi resultado, aún no lo he acabado, se me ocurrieron más cosas que le podría agregar, pero por ahora así quedó.
https://pablojl.github.io/TODO-App/
https://github.com/PabloJL/TODO-App
Que increible curso!
Aquí dejo la versión de mi app.
Repo: https://github.com/ivantdev/todo-app
Deploy: https://ivantdev.github.io/todo-app/
Les comparto como quedo la app
ToDo React App
Hola, les comparto mi resultado final:
P. D. Al final terminé trabajando con TypeScript, se me hizo más controlable el código jeje. Excelente curso. 😄
Link a mi app
Después de sufrir con el Github pages!
https://juansebastiancondefarias.github.io/primerappreact/
Deploy en Heroku https://introduccion-react.herokuapp.com/
Aqui esta mi version de la app, espero que les guste
https://juanpaferro.github.io/todo-machine/
este es mi codigo
https://davidmantilla.github.io/react-todo/
https://github.com/DavidMantilla/react-todo/
Resultado
Comparto mi GitHub Page! Sin duda, lo mejoraré un poco más e irá para mi portafolio!
https://gustavoaguilar82.github.io/QuestsControl/
Tiene una animación de un cafecito caliente al completar todas las tareas!
Y una del perrito, que se duerme o despierta según se pase el mouse por el botón agregar.
Además, si no se está haciendo una busqueda, la barra no aparece~
Comparto el resultado! 😃
Repo: https://github.com/melvec/todo-melissa
App: https://melvec.github.io/todo-melissa/
¡Hola, Comunidad! 🚀
Les comparto mi trabajo ✌️
¡Espero les guste mucho y espero sus comentarios!
Nunca Pares de Aprender 💚
Me encantó el Curso 😉
Proyecto en GitHub Pages.
https://deyvisnvg.github.io/curso-intro-react/
jejeje estrellitas solo para los creativos
Este es mi proyecto del curso 😄
Y el código
Amigos, mi proyecto es este: https://marcoalducinr5.github.io/curso-intro-react/, al contrario de Juan David, yo lo hice al reves, lo hice para Desktop (o escritorio) y no para moviles, por eso, si lo abren en su celular, se va a ver pesimo, pero no se preocupen, ya estare trabajando en ello proximamente,
Por si a alguien más le sale que GH lee su archivo “README” es porque:
-
En la sección Pages de GH, no está usando la rama donde está la carpeta “build” que creó el comando “npm run build”. Solo hay que cambiar a la rama que sí tenga esta carpeta.
-
Si solo tienes la rama “master” y no está la carpeta “build” como me pasó a mí:
a. Entra al archivo .gitignore y borra “build”. Vuelve a ejecutar “npm run deploy” y ya debería funcionar.
b. Borra el package de gh-pages y vuelve a descargarlo pero como package normal, no como dev (creo que eso hace que lo incluya en el .gitignore, no tengo pruebas pero tampoco dudas) e igual bórralo de .gitignore si es que sigue ahí.
No sé si solo me pasó a mí o si hay otra solución pero esa es la que me sirvió.
Tener en cuenta predeploy para futuras referencias
Aquí va la mia!!!
url https://paulaxam.github.io/Todo-Machine/
repositorio https://github.com/Paulaxam/Todo-Machine
Hola! Comparto el resultado hasta ahora. Seguramente le agregue más cositas y vaya mejorando.
Hola les comparto mi resultado. https://lizmadelyne.github.io/mi-proyecto-react/
Estoy Muy feliz, sjlfjslkfjsl… GitHub Repo / Url-App
Ya tengo otras mil funcionalidades en mente para mejorar, estén atentos a ellas…
Holaaa muy emocionado por lo que he aprendido en este curso aqui les dejo mi resultado… agradezco el feedback.
Aquí mi App, me desvele un poco para terminar el diseño, pero se logró, aun se pueden pulir varios detalles, pero hasta este punto me agrada lo que logre en el curso, aprendí muchísimo 😄
Page: https://pabloquiroz-pq.github.io/ToDoList/
Repo: https://github.com/PabloQuiroz-PQ/ToDoList
Espero terminar más cursos y mejorar mis habilidades con React JS.
¡Gracias Juan!
Hola ! Es la primera vez que comparto mis resultados, me gustaría agregar en el futuro filtros de “Ya completado”, “Sin completar” y mejorar mis estilos.
Espero que les guste !
Link al website: https://jmrodriguez-work.github.io/to-do-app/
Link al repo: https://github.com/JMRodriguez-work/to-do-app
A mi me salía este error:
Cloning into 'P:\Platzi\React\intro-a-react\node_modules\.cache\gh-pages\g[email protected]!leeansilva!React-curso-introductorio.git'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
PS P:\Platzi\React\intro-a-react>
En mi caso era porque tenia una passphrase configurada en github(cada vez que hacia un push me pedia ingresar esta pass por ejemplo). Luego de probar varias soluciones me di cuenta que ese era el problema, entonces mi solución fue removerla con el siguiente comando en gitBash:
ssh-keygen -p
apretas Enter, luego ingresas tu passphrase(porque te pide tu pass vieja), y luego te pide una nueva. Entonces ahi no escribes nada, presionas Enter y luego confirmas con Enter. Listo. Haces el run deploy y te debería funcionar.
Mi humilde aporte: ToDoMachine
En el futuro le mejoraré el responsive design, y algunos detalles. Pero no me lo tomé tan en serio al diseño, ya que mi objetivo principal era aprender a usar React.
Aqui dejo un link de un video q muestra la maneras facil de hacer el deploy https://www.youtube.com/watch?v=Q9n2mLqXFpU
Bueno chicos un placer compartir este curso acá está mi proyecto:::
REPOSITORIO…
https://github.com/KevinAndresG/to_do_project
PROYECTO…
https://kevinandresg.github.io/to_do_project/
gracias a todos y gracias al profe Juan David
Les comparto mi proyecto!
Aquí el deploy: https://davidespinog.github.io/intro_react_platzi/
y aquí el repo: https://github.com/DavidEspinoG/intro_react_platzi
https://yens-rosero.github.io/ReactProyectBasic-task/
No es mucho , pero es trabajo honesto 😦
Solucion Para el error:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Borrar su clave SSH y crear una nueva pero sin contraseña, es lo único que me funcionó a mi, espero que les ayude también
Build a Github Pages
Aqui esta el mio, el css es un poco inspirado porque no soy muy bueno en css pero agregue mas funciones QoL (Quality of Life)
Pagina
Repositorio
Deploy con GitHub Pages
Les dejo mi practica
page: https://christian-olivers.github.io/my-to-do-app/
repository: https://github.com/christian-olivers/my-to-do-app
Tuve que tomar el curso dos veces, pero ya funciona y entendí mejor 😂
https://ivisoftware.github.io/ivi_task/
Aún debo pulir estilos pero ya iré actualizando conforme avance en otros cursos.
Bueno despues de haber tenido algunos problemas con el deploy realice el proyecto de nuevo con Vite y lo desplegue en netlify, muchooooo más facil, aquí les comparto el link de mi proyecto, opinen pues !!
https://sparkly-cactus-52e198.netlify.app/
Les muestro como me quedo mi proyecto:
Repositorio: https://github.com/alirioCorea/my-todo-list-react
Page: https://aliriocorea.github.io/my-todo-list-react/
Hola, comparto mi To do List App.
Github: https://github.com/jhcueva/TodoList
Desktop View:
Mobile View:
Hola, comparto mi resultado:
https://pere94.github.io/todo-machine/
Version desktop:
Version movile:
Espero les guste 😄
link
Link del proyecto click
Skeleton loader
Comparto mi resultado
Repositorio: https://github.com/Misael-GC/curso-intro-react
Page: https://misael-gc.github.io/introduccion-react/
Resultado:
URL del pages: https://pandrea-hub.github.io/TODOs/
URL del github: https://github.com/Pandrea-hub/TODOs
En el min 7 hay un error, dice que vamos a agregar la carpeta build para el commit. Pero no es eso lo que se agrega, se agregan los cambios en el package.json. La carpeta build no se va a agregar porque esta en el .gitignore
Aquí mi aplicación:
Demo: https://cloudmex-alan.github.io/todos-app-react/
Github: https://github.com/cloudmex-alan/todos-app-react
Mi Deploy del todo
Dejo mi repositorio aquí también: repositorio
Aprendí bastante, algunas cosas no las hice debido a que por mi diseño no era necesario.
Le agregue para que pudiera ingresar la tarea con el Enter y para que se pueda Cancelar haciendo click afuera del form.
Repo
No puedo hacer el deploy, ayudaaa!
El build lo corre.
[email protected] predeploy
npm run build
[email protected] build
react-scripts build
Creating an optimized production build…
Compiled with warnings.
src\TodoContext\useLocalStorage.js
Line 1:8: ‘React’ is defined but never used no-unused-vars Line 27:6: React Hook useEffect has missing dependencies: ‘initialValue’ and ‘itemName’. Either include them or remove the dependency array react-hooks/exhaustive-deps
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
44.41 kB build\static\js\main.c24671b5.js
612 B build\static\css\main.78a9bdd6.css
The project was built assuming it is hosted at /LaureanoVera/todo-machine/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
[email protected] deploy
gh-pages -d build
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the “repo” option).
Mi resultado hasta el momento,
Tengo pensando añadir categorias, que se pueda filtrar por categorias, por tareas completadas, etc.
Aquí mi resultado usando Bootswatch
Repo: Github
Deploy: Live Preview
Yeeeep!! listo el deploy,
puede ver mi app aquí: TODO’s APP
y aquí el repo por si quieren revisar el código: GH REPO
quizás lo mas interesante es que yo utilice una organización de archivos distinta, agrupe todos los componentes js en una cerpeta, los css de los componentes en otra y la de los providers
Aqui esta mi resultado: Live Demo
Comparto mi resultado: https://todolistaweb.herokuapp.com/
Aun me falta mucho por delante con React pero por fin terminamos con este primer paso!
GH: https://github.com/ManuMxrales/TodoApp
Deploy: https://manumxrales.github.io/TodoApp/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.