Saltar al contenido
MundoCursos

¿Cómo subir un proyecto de React a Github?

¿Ya tienes listo un trabajo hecho en React y ahora lo quieres subir a Github? ¡Es el paso a seguir! Pero si es tu primera vez es totalmente normal que no sepas qué tienes que hacer. En ese caso no te preocupes, dado que te traemos una guía en la que te explicamos a hacerlo. ¡En breve serás un profesional y podrás repetir el proceso todas las veces que quieras!

¿Cómo subir un proyecto de React a Github paso a paso?

A lo largo de esta guía vas a comprobar que los pasos que tienes que dar para llevar tu aplicación de React a Github Pages no son, ni mucho menos, tan complicados. Presta atención a cada una de las indicaciones:

1. Hacer comprobaciones previas de instalación

Es obvio que no te quieres encontrar con problemas cuando ya estés en proceso de subir la app a Github. Por ello, lo primero que tienes que hacer es una comprobación previa para asegurarte de que tienes instalados en tu equipo los siguientes elementos:

  • Node
  • Npm

Para ello, abre el terminal de sistema y escribe los siguientes comandos, siempre uno en cada línea de código.

node –v

npm –v

Sabrás que tienes instalados los tres elementos si la respuesta del terminal es una versión de cada uno de ellos. En el caso de que no se encuentre alguno, tendrás que proceder a su instalación. Luego ya puedes continuar al paso 2.

¿Te gustaría aprender React?

Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.

Sin embargo, si quieres acelerar al máximo tu aprendizaje, te recomendamos que veas esta lista con los mejores cursos para aprender React desde cero. Los hemos seleccionado y analizado minuciosamente para ayudarte a elegir el ideal.

2. Termina tu proyecto de React

Por supuesto, para subirlo a Github, primero necesitas completar tu proyecto. En otra guía ya te hemos contado cómo tienes que hacerlo, así que, si tienes dudas, te invitamos a consultarla.

De una manera resumida, te diremos que tienes que usar npx create-react-app proyecto-para-git y cargar este código en la terminal de sistema:

npx create-react-app proyecto-para-git
npx create react app

Sabrás si se ha creado el proyecto de forma eficiente si entras en el directorio del mismo (“proyecto-para-git) escribes este comando cd proyecto-para-git y luego npm start.

npm start

Y te aparecerá la ejecución de tu aplicación en la dirección http://localhost:3000.

Proyecto React creado con npx create react app

Eso te confirmará que todo está bien y que el proyecto se ha completado. ¡Ahora solo te queda cargarlo en Github!

3. Crea un repositorio en Github

Sin repositorio en Github no tendrás la forma de subir tu proyecto. (dando por entendido que, además, ya te has registrado previamente).

Crear nuevo repositorio GitHub
Nombre repositorio GitHub
Repositorio GitHub creado

4. Configura tu proyecto en React

Ahora abre tu proyecto en un IDE (para este tutorial usaremos Visual Studio). Primero tienes que ir a package.json“ con la intención de dar forma a una nueva propiedad que recibirá el nombre de “homepage”. El valor que tendrá esta propiedad será la dirección del repositorio de Github en la que vas a desplegar tu proyecto.

No obstante, no te sirve con la misma URL tal y como la genera Github, que suele ser de este tipo:

github.com/tu-usuario/proyecto-para-git

En su lugar, tendrás que modificarla para que tenga esta estructura:

tu-usuario.github.io/proyecto-para-git

Por lo tanto, el código quedará de la siguiente manera:

"homepage": "https://tu-usuario.github.io/proyecto-para-git"

Ahora, de nuevo en package.json, tienes que hacer unos añadidos para los comandos “predeploy” y “deploy” con los que preparas el lanzamiento en Github (predeploy) y lo llevas a cabo (deploy).

Dentro de la lista de scripts, antes de “start”, “build”, “test” y “eject” introduce lo siguiente:

"predeploy": "npm run build",

"deploy": "gh-pages –d build"
Configura tu proyecto en React

5. Instala gh-pages

Abre la terminal de Visual Studio con “Ctrl + Shift + ñ“

Abrir terminal visual studio code

Instala el paquete npm gh-pages como dependencia de desarrollo.

npm install gh-pages --save-dev
npm install GH_PAGES

6. Envía los cambios de tu proyecto al repositorio de Github

Para finalizar, hay que enviar los cambios del proyecto al repositorio. Lo harás con el siguiente código:

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/tu-usuario/proyecto-para-git

git push -u origin main
Envía los cambios de tu proyecto al repositorio de GitHub

Y por último ingresa el código de deploy:

npm run deploy
npm run deploy

Tras esperar un par de minutos, entra en tu repositorio de Github para ver el proyecto. Para ello, entra en “Settings” y en “Pages”. Aparecerá un mensaje en el que se marcará como correcta la disponibilidad de la url con la que has trabajado antes. En el ejemplo sería:

https://tu-usuario.github.io/proyecto-para-git

Deploy proyecto React en GitHub Pages

Este apartado de Github te proporcionará otra información y te permitirá cambiar el tema de publicación del proyecto.