Curso de Vue JS - Tutorial en Español 😍 [Desde Cero] (Parte I)

Curso de Vue JS - Tutorial en Español 😍 [Desde Cero]


Curso de Vue.js 😍 #01 Introducción [Tutorial en Español desde cero] Framework de Javascript


Apuntes:

  • Página oficial de documentación de Vue.js.
  • Script para trabajar con Vue.js.
    • Desarrollo: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>.
    • Producción: <script src="https://cdn.jsdelivr.net/npm/vue"></script>.
  • Creo un proyecto vacio en Visual Studio Code o cualquier editor de preferencia.
  • Creo un archivo de extensión html (01.html) y otro de extensión js (01.js).
  • El ponente recomienda instalar la extensión Live Server en Visual Studio Code.
  • Contenido archivo 01.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hola mundo con Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>{{ titulo }}</h1>
        <ul>
            <li v-for="fruta of frutas">
                {{fruta.cantidad}} - {{fruta.nombre}}
                <span v-if="fruta.cantidad === 0"> - Sin stock</span>
            </li>
        </ul>
    </div>
   <!-- development version, includes helpful console warnings -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
   <script src="01.js"></script>   
</body>
</html>
  • Contenido archivo 01.js:
const app = new Vue({
    el: '#app',
    data: {
        titulo: 'Hola mundo con Vue',
        frutas1: ['Manzana', 'Pera', 'Platano'],
        frutas: [
            {nombre: 'Pera', cantidad: 10},
            {nombre: 'Manzana', cantidad: 0},
            {nombre: 'Platano', cantidad: 11}
        ]
    }
});

#02 Methods, v-model y Evento Click | Curso de Vue.js 😍 Desde Cero [Tutorial en Español]


Apuntes:

  • Modificamos el archivo 01.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hola mundo con Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>{{ titulo }}</h1>
        <input type="text" v-model="nuevaFruta">
        <button @click="agregarFruta">Agregar</button>
        <ul>
            <li v-for="fruta of frutas">
                {{fruta.cantidad}} - {{fruta.nombre}}
                <span v-if="fruta.cantidad === 0"> - Sin stock</span>
            </li>
        </ul>
    </div>
   <!-- development version, includes helpful console warnings -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
   <script src="01.js"></script>   
</body>
</html>
  • Modificamos el archivo 01.js:
const app = new Vue({
    el: '#app',
    data: {
        titulo: 'Hola mundo con Vue',
        frutas1: ['Manzana', 'Pera', 'Platano'],
        frutas: [
            {nombre: 'Pera', cantidad: 10},
            {nombre: 'Manzana', cantidad: 0},
            {nombre: 'Platano', cantidad: 11}
        ],
        nuevaFruta: ''
    },
    methods:{
        /*agregarFruta: function(){
            // methods es una palabra reservada.
            // Forma vieja de agregar función,
            // a continuación la nueva forma.
        }*/
        agregarFruta(){
            // console.log('diste click');
            this.frutas.push({
                nombre: this.nuevaFruta, cantidad: 0
            })
        }
    }
});

# 03 Keyup, v-model y Computed | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Modificamos el archivo 01.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hola mundo con Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>{{ titulo }}</h1>
        <input type="text" v-model="nuevaFruta" @keyup.enter="agregarFruta">
        <button @click="agregarFruta">Agregar</button>
        <ul>
            <li v-for="fruta of frutas">
                <input type="number" v-model.number="fruta.cantidad">
                {{fruta.nombre}}
                <button @click="fruta.cantidad++">+</button>
                <span v-if="fruta.cantidad === 0"> - Sin stock</span>
            </li>
        </ul>
        <h4>TOTAL: {{sumarFrutas}}</h4>
    </div>
   <!-- development version, includes helpful console warnings -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
   <script src="01.js"></script>   
</body>
</html>
  • Modificamos el archivo 01.js:
const app = new Vue({
    el: '#app',
    data: {
        titulo: 'Hola mundo con Vue',
        frutas1: ['Manzana', 'Pera', 'Platano'],
        frutas: [
            {nombre: 'Pera', cantidad: 10},
            {nombre: 'Manzana', cantidad: 0},
            {nombre: 'Platano', cantidad: 11}
        ],
        nuevaFruta: '',
        total: 0
    },
    methods:{
        /*agregarFruta: function(){
            // methods es una palabra reservada.
            // Forma vieja de agregar función,
            // a continuación la nueva forma.
        }*/
        agregarFruta()
            // console.log('diste click')
            this.frutas.push({
                nombre: this.nuevaFruta, cantidad: 0
            });
            this.nuevaFruta = '';
        }
    },
    computed:{
        sumarFrutas(){
            this.total = 0;
            for(fruta of this.frutas){
                this.total += fruta.cantidad;
            }
            return this.total;
        }
    }
});

#04 Clases (v-bind:class) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Recomenzaremos un nuevo proyecto ahora utilizando bootstrap, así como se hizo en los apuntes del primer vídeo pero ahora llamaremos a los archivos 07.html y 07.js.
  • Generamos una estructura básica en el archivo html y pegamos los framework de bootstrap en la cabecera y los de vue,js al final del body.
  • Archivo 07.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <!-- JS, Popper.js, and jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <div :class="['p-3','text-white', fondo]">
            <p>Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en
            demostraciones de tipografías o de borradores de diseño para probar 
            el diseño visual antes de insertar el texto final. Lorem ipsum es el texto 
            que se usa habitualmente en diseño gráfico en demostraciones de 
            tipografías o de borradores de diseño para probar el diseño 
            visual antes de insertar el texto final.</p>
        </div>
        <input type="text" class="form-control my-3" v-model="fondo">
        <div class="text-white p-3" :class="{'bg-info': color, 'bg-success': !color}">
            <p>Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en
            demostraciones de tipografías o de borradores de diseño para probar 
            el diseño visual antes de insertar el texto final. Lorem ipsum es el texto 
            que se usa habitualmente en diseño gráfico en demostraciones de 
            tipografías o de borradores de diseño para probar el diseño 
            visual antes de insertar el texto final.</p>
        </div>
        <button class="btn btn-primary mt-2" @click="color = !color">Cambiar</button>
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="07.js"></script> 
</body>
</html>


  • 07.js:
const app = new Vue({
    el: '#app',
    data: {
        fondo: 'bg-warning',
        color: false
    },
    methods: {
    }
})

#05 Propiedades Computadas (computed) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Recomenzaremos un nuevo proyecto ahora utilizando bootstrap, así como se hizo en los apuntes del primer vídeo pero ahora llamaremos a los archivos index.html y app.js.
  • Generamos una estructura básica en el archivo html y pegamos los framework de bootstrap en la cabecera y los de vue,js al final del body.
  • Archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <!-- JS, Popper.js, and jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <h3>{{mensaje}}</h3>
        <h3>invertido: {{invertido}}</h3>
        <input type="text" class="form-control" v-model="mensaje">
        <hr />
        <button class="btn btn-primary" @click="contador++">+</button>
        <button class="btn btn-danger" @click="contador--">-</button>
        <h3>
          {{contador}}
        </h3>
        <div class="progress">
            <div class="progress-bar" role="progressbar" 
            :style="{'width': contador + '%'}" aria-valuenow="25" aria-valuemin="0" 
            aria-valuemax="100"
            :class="color"
            >
                {{contador}}%
            </div>
        </div>
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="app.js"></script> 
</body>
</html>
  • Archivo app.js:
const app = new Vue({
    el: '#app',
    data: {
        mensaje: 'hola soy Soluciones++',
        contador: 0
    },
    methods: {

    },
    computed:{
        invertido(){
            return this.mensaje.split('').reverse().join('');
        },
        color(){
            return {
                'bg-success': this.contador <= 10,
                'bg-warging': this.contador > 10 && this.contador < 20,
                'bg-danger': this.contador >= 20
            }
        }
    }
})

#06 Ciclo de vida de Vue (Lifecycle) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Creamos un proyecto como en los casos anteriores.
  • Archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <!-- JS, Popper.js, and jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <h3>{{saludo}}</h3>
        <button @click="saludo = 'saludos cambiado'">Cambiar</button>
        <button @click="destruir()">Destruir</button>
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="app.js"></script> 
</body>
</html>
  • Archivo app.js:
const app = new Vue({
    el: '#app',
    data: {
        saludo: 'soy ciclo de vida de Vue',
    },
    methods: {
        destruir(){
            this.$destroy();
        }
    },
    computed:{
    },
    beforeCreate(){
        console.log('beforeCreate')
    },
    created(){
        console.log('created')
    },
    beforeMount(){
        console.log('beforeMount')
    },
    mounted(){
        console.log('mounted')
    },
    beforeUpdate(){
        console.log('beforeUpdate')
    },
    updated(){
        console.log('updated')
    },
    beforeDestroy(){
        console.log('beforeDestroy')
    },
    destroyed(){
        console.log('destroyed')
    }
})

#07 Componentes básicos | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Componentes</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="componentes/saludo.js"></script>
    <script src="componentes/contador.js"></script>
</head>
<body>
    <div id="app">
        <saludo></saludo>
        <contador></contador>
        <!--Los contadores son independientes-->
        <contador></contador>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
            }
        })
    </script>
</body>
</html>
  • Archivo componentes/saludo.js:
Vue.component('saludo',{
    //template: '<h1>Saludo de forma estática</h1>',
    template: //html
    `
        <div>
            <h1>{{saludo}}</h1>
            <h3>Saludo estático</h3>
        </div>
    `,
    data(){
        return{
            saludo: 'Hola desde Vue'
        }
    }
});
  • Archivo componentes/contador.js:
Vue.component('contador',{
    template: //html
    `
    <div>
        <h3>{{numero}}</h3>
        <button @click="numero++">+</button>
    </div> 
    `,
    data(){
        return{
            numero: 0
        }
    }
});

#08 Comunicación entre componentes (parte 1) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • Archovo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <!-- JS, Popper.js, and jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="componentes/padre.js"></script>
    <script src="componentes/hijo.js"></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <padre></padre>
    </div>
    <script>
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>
  • Archivo componentes/padre.js:
Vue.component('padre',{
    template: //html
    `
    <div class="p-5 bg-dark text-white">
        <h2>Componente Padre: {{numeroPadre}}</h2>
        <button class="btn btn-danger" @click="numeroPadre++">+</button>
        <hijo :numero="numeroPadre"></hijo>
    </div>
    `,
    data(){
        return{
            numeroPadre: 0
        }
    }
})
  • Archivo componentes/hijo.js:
Vue.component('hijo',{
    template: //html
    `
    <div class="py-5 bg-success">
        <h4>Componente Hijo: {{numero}}</h4>
    </div>
    `,
    props: ['numero']
})

#09 Comunicación entre componentes (parte 2) | Curso de Vue.js 😍 Desde Cero


Apuntes:

  • index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <!-- JS, Popper.js, and jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="componentes/padre.js"></script>
    <script src="componentes/hijo.js"></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <padre></padre>
    </div>
    <script>
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>
  • componentes/padre.js:
Vue.component('padre',{
    template: //html
    `
    <div class="p-5 bg-dark text-white">
        <h2>Componente Padre: {{numeroPadre}}</h2>
        <button class="btn btn-danger" @click="numeroPadre++">+</button>
        {{nombrePadre}}
        <hijo :numero="numeroPadre" @nombreHijo="nombrePadre = $event"></hijo>
    </div>
    `,
    data(){
        return{
            numeroPadre: 0,
            nombrePadre: ''
        }
    }
})
  • componentes/hijo.js:
Vue.component('hijo',{
    template: //html
    `
    <div class="py-5 bg-success">
        <h4>Componente Hijo: {{numero}}</h4>
        <h4>Nombre: {{nombre}}</h4>
        <button @click="numero++">+</button>
    </div>
    `,
    props: ['numero'],
    data(){
        return{
            nombre: 'Soluciones++'
        }
    },
    // Esta función se ejecuta una vez ya se cargó en template.
    mounted(){
        this.$emit('nombreHijo', this.nombre);
    },
})

Comentarios

Publicar un comentario

Entradas más populares de este blog

Algunas páginas de cursos online recopiladas por Soluciones++

Imagen
Principales páginas de cursos online: Linkedin Learning Excelente página, muchos cursos son gratuitos, y todos con certificados, y de paso quedan de una vez registrados en tu perfil de Linkedin. DevCode Esta página me la acaba de recomendar un amigo, se ve muy buena, algunos cursos son gratuitos y entrega certificados. Platzi Excelente plataforma de cursos, todos sus cursos son pagos, excepto unos pocos. De los gratuitos existen dos que son muy buenos, uno de Programación Básica y otros de Marca Personal, ambos son muy, pero muy buenos. Códigofacilito En esta página tiene muchos cursos gratuitos, pero pocos con certificados. Los cursos que he visto tienen un enfoque práctico y están muy bien explicados. Microsoft No he tenido la oportunidad aún de explorar detenidamente la calidad de los cursos que ofrecen, pero según las críticas que he podido leer, muchos son muy buenos, gratuitos y entregan certificad...
Leer más

Ruta hacia el desarrollador web full stack en Soluciones++

Imagen
Curso de Marca Personal de Platzi Lo primero, pero lo primero es realizar el curso de Marca Personal de Platzi, que si bien no te enseñará a programar, te dará intrucciones claras de la orientación que deben tomar tus proyectos y tus estudios, para ir construllendo desde el inicio un cv impecable. El curso es completamente gratuito y entrega certificado. Ir a curso de Marca Personal Abrir una cuenta en GitHub Es necesario abrir primero que nada una cuenta en GitHub para poder ir creando repositorio de los proyectos que realices a lo largo de este grato y largo camino hacia nuestra conversión en desarrollador web full stack. Ir a GitHub Curso de GitHub Para poder crear respositorios, .... Ir a Curso de GitHub
Leer más