Entradas

Mostrando las entradas de mayo, 2019

05.- Reactjs⚛️ [Renderizar elementos con state]

Imagen
State nos ayuda a renderizar (renderear) partes específicas de nuestro programa sin tener que refrescar toda nuestra pagina, esta es la magia de reactjs.


importReact,{Component}from'react';classMiclaseextendsComponent{constructor(){super();this.state={count:1};this.clickBotones=this.clickBotones.bind(this);}componentDidMount(){this.setState({count:1});}clickBotones(e){if(e.target.id==="sumar"){this.setState({count:this.state.count+1});}elseif(e.target.id==="restar"&&this.state.count>1){this.setState({count:this.state.count-1});}elseif(e.target.id==="reiniciar"){this.setState({count:1});}}render(){return(<divclassName="contenido"><h2>Contador{this.state.count}</h2><p><buttonid="sumar"onClick={this.clickBotones}>+</button><buttonid="restar"onClick={this.clickBotones}>-</button><buttonid="reiniciar"onClick={this.clickBotones}>Reiniciar</button&…

16.-Vue js 2 tutorial español 👀 [CLI UI en Ubuntu]👀👀

Imagen
Comandos
sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm sudo npm install -g @vue/cli vue --version vue ui

Video


15.-Vue js 2 tutorial español 👀 [CLI en Ubuntu]👀👀

Imagen
Introducción En este tutorial no vamos a trabajar con código, tampoco con teoría, lo que vamos a hacer es una instalación de vue-cli y ustedes se preguntaran que es eso de cli, pues cli significa "command-line interface" y e español "interfaz de línea de comandos ". Yo creo que terminamos igual de confundidos así que voy a ser un poco mas coloquial: vue-cli es un programa que nos ayuda a crear proyectos y a agregar plugins a nuestro proyecto, es como un wordpress en donde puedes instalar plugins.

Comandossudo apt-get update sudo apt-get install nodejs sudo apt-get install npm sudo npm install -g @vue/cli vue --version vue create nombre-proyecto npm run serve

Video








04.- Reactjs⚛️ trabajar con clases [class y render en reactjs]

Imagen
En este tutorial vamos a aprender a crear clases en reactjs, si hemos visto las funciones que hemos trabajado no hemos manejado clases. Lo mas apropiado o mas recomendado es trabar con clases.

public/index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico"/><metaname="viewport"content="width=device-width, initial-scale=1"/><metaname="theme-color"content="#000000"/><!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --><linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/><!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only file…

14.-Vue js 2 tutorial español 👀 [Actions,mapActions,mapState,]👀👀

Imagen
Introducción En este video vamos a trabajar con las acciones y que es eso de las acciones pues es el área de vuex que se comunica con el backend y que es eso de comunicarse con el backend, pues es es el área que se comunica con la base de datos, o cualquier forma con la que queramos obtener información.

Codigo<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js">…

13.-Vue js 2 tutorial español 👀 [Vuex, mapState,object spread operator]👀👀

Imagen
Introducción En este video vamos a seguir trabajando con mapState de vuex, pero en esta ocasión en lugar de estar trabajando con datos vamos a trabajar con mutaciones (osea las mutaciones que hicimos previamente) y también agregaremos nuevas mutaciones.

Codigo<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script><script>// PADREVue.component(…

12.-Vue js 2 tutorial español 👀 [Vuex, mapState,object spread operator]👀👀

Imagen
Introducción En este tutorial vamos a  seguir trabajando esta increible herramienta que nos da vue llamada vuex y lo que vamos a hacer es agregar algunos elementos extras,vamos a simplificar la forma en la que se mandan a llamar esos valores y por ultimo usaremos una propiedad de vuex llamada mapstate.


Codigo

<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js">&…

11.-Vue js 2 tutorial español 👀 [Vuex]👀👀

Imagen
Introducción En este video vamos a trabajar con vuex así como lo hemos prometido en los tutoriales anteriores pues ha llegado el momento, pero para los que no sepan aun que es vuex, vuex es una librería de vue que nos ayuda a almacenar datos para que puedan ser accedidos desde cualquiera de nuestros componentes.

Codigo
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js&…

10.-Vue js 2 tutorial español 👀 [Componentes anidados enviar datos del hijo al padre]👀👀

Imagen
Introducción En este tutorial vamos a ver mas componentes, pero va a ser algo muy simple, solo vamos a enviar información del componente hijo hacia el padre, si recuerdan en el tutorial anterior enviamos información del componente padre al hijo y en este caso va a ser a la inversa. Ademas nos va  ayudar a conocer https://vuex.vuejs.org el cual nos ayuda a almacenar informacion de forma centralizada para poder acceder a esta información desde cualquier componente.

Codigo
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body>…

09.-Vue js 2 tutorial español 👀 [Componentes anidados]👀👀

Imagen
Introducción En este tutorial vamos a trabajar con mas componentes, si mas componentes, porque vuejs es lo que nos dice que es lo debemos estudiar, para ser exactos vamos a trabajar con componentes anidados. En otras palabras vamos a crear 2 componentes uno dentro del otro y entre ellos se van a comunicar

Codigo
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divid="elemento"class="container"><padre></padre></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>Vue.component('padre',{template://html`<divcl…

08.-Vue js 2 tutorial español 👀 [Componentes]👀👀

Imagen
Introducción En este tutorial vamos a trabajar con los poderosos componentes y lo no digo yo lo dice VueJS aquí y es verdad porque nos ayuda a encapsular código y hacerlo reutilizable y no se imaginan lo facil eficiente y bonitos que hace vue para encapsular el código en componentes.

Codigo tuto8.html

<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title></head><body><divid="elemento"><div><h1>{{numero}}</h1><button@click="numero++">+</button></div><componente></componente><componente></componente></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="componente.js"></script><script>constcon=newVue({el:"#elemento",data:{numero:0}});</script></html>
componente.js

Vue.component('component…

Facebook Like