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&…

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…

03.- Manejo de datos con Reactjs⚛️ y prop-types

Imagen
En este tutorial vamos a aprender a usar prop-types y ustedes se preguntaran ¿que no estábamos trabajando con reactjs?, pues si es verdad, pero prop-types es una librería que nos ayuda a leer datos y pasarlos a nuestros componentes. Una mala noticia es que prop-types no viene pordefault con reactjs pero la buena es que es muy fácil de instalar, solo usamos este comando:
npm install --save prop-types

src/MiApp/MiApp.css .MiApp{text-align:center;}.MiApp-logo{animation:MiApp-logo-spininfinite20slinear;height:40vmin;pointer-events:none;}.MiApp-header{background-color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px+2vmin);color:black;}.MiApp-link{color:blue;}@keyframesMiApp-logo-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.menu{list-style:none;}.menuli{display:inline-block;margin-left:10px;}
src/MiApp/MiApp.js importReactfrom'react';importlogofrom'./../logo.svg';import'./MiApp.css&…

02.-Vue js 2 tutorial español 👀 [arreglos, objetos y links]

Imagen
En este tutorial vamos a trabajar con arreglos (no pueden hacer falta), objetos (son como matrices pero mas flexibles) y tambien vamos a aprender a usar links en vuejs.

Codigo<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title></head><body><divid="elemento"> {{contenido}} <ul><liv-for="lenguaje of lenguajes"><a:href="lenguaje.link"target="_blank">{{lenguaje.nombre}}</a></li></ul></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>constcon=newVue({el:"#elemento",data:{contenido:"Hola mundo desde programador novato",lenguajes:[{nombre:"JavaScript",link:'https://www.javascript.com'},{nombre:"PHP",link:'https://php.net'},{nombre:"Python",link:'https://www.pyt…

01.-Vue js 2 tutorial español 👀 [Hola mundo en vuejs]

Imagen
Introducción. En este tutorial vamos a hablar de vuejs, vamos a ver para que no nos sirve este framework, para que si, cuando si usarlos cuando no, también analizaremos su competencia (Angular JS y React JS). Y lo primero que vamos a hacer es ver la competencia de vuejs. Para eso podemos ir a esta pagina: https://trends.google.com.mx/trends si nos percatamos Vuejs esta muy por debajo de AngularJS y ReactJS. Una vez visto esto cual es la ventaja de aprender vuejs, pues es simple Vuejs es mucho mas fácil de aprender que AngularJS y ReactJS ademas de que es ligero. Otra cosa a favor de VueJS es que fue creado basado en Angular pero con el objetivo de ser mas simple y divertido. como lo podemos ver en esta url:
https://en.wikipedia.org/wiki/Vue.js


Codigo.
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"/><title>Vuejs</title></head><body><divid="elemento"> {{contenido}} </div></bo…

Suscribete

Imagen
http://www.youtube.com/subscription_center?add_user=creandolaweb

01.- Curso de Reactjs ⚛️ [Que es y cómo instalarlo]

Imagen
¿Que es reactjs? ¿Un lenguaje de programación?: No
¿Un framework?: No
Reactjs es una librería hecha para poder programar nuestra aplicaciones de forma fácil sencilla y basada en componentes y cada componente es independiente a los demá, lo que me recuerda a iframe. Si llegaron a usar Iframe, un iframe era una forma de meter una pagina web dentro de otra y esos iframes eran independientes a los demás.



# Instalamos npm sudo apt-get install npm # Con npm instalamos react sudo npm install -g create-react-app # nos movemos a la carpeta donde se creara el proyectocd /var/www/html # Creamos el proyecto create-react-app react-hola-mundo # Entramos en la carpeta del proyectocd react-hola-mundo


Nota: los nombres de los proyectos en react no pueden llevar "MAYUSCULAS" ni espacio, si quieren separar las palabras se recomienda user guión medio "-".
Ya que tenemos instalado reactjs vamos a prender en primer lugar a comprender la estructura de archivos de esta libreria y ademas c…

Gráficos dinámicos con chart.js 📊

Imagen
Introducción En este video vamos a aprender a crear graficas en nuestra pagina web con esta potente herramienta llamada chart.js y la url de la pagina es https://www.chartjs.org. Antes de comenzar a tirar codigo (escribir código) les voy a presentar una comparativa de  las diferentes alternativas a chartjs y porque esta herramienta es la que mas nos conviene.

Comparativa1.- highcharts en lo particular a mi me gusta mucho, yo he trabajado con esta herramienta y tiene infinidad de alternativas pero tiene el inconveniente de que es de paga y varia desde 800USD a 2500USD. Se puede descargar y usar de forma profesional pero en la parte inferior derecha de tus gráficas aparecerá una leyenda que dirá que esta gráfica esta hecha por highcharts y eso no es muy profesional.


2.- Canvasjs De igual forma he trabajado un poco con esta herramienta y es muy intuitiva, flexible y no hace falta documentación. Además los ejemplos son muy entendibles puedes hacer pruebas directamente pero ocurre lo mismo…

04.-Machine Learning JavaScript Español🇪🇸 [Transferencia de conocimiento con Extracción de rasgos]

Imagen
Introducción. En este tutorial vamos a trabajar directamente con el código, vamos a hacer un programa que como les comentaba en el tutorial anterior va a reconocer ya sea que tengamos en mi caso una brocha o una taza. Este codigo me recuerda a la serie de Silicon Valley: Not Hotdog donde se reconocían las imágenes, pues hacer algo así es tan simple como colocar el código de abajo en nuestro editor guardarlo y correrlo en nuestro navegador.
Codigo
<html><head><metacharset="UTF-8"><title>Image Classification using Feature Extraction with MobileNet. Built with p5.js</title><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script><script src="https://unpkg.com/ml5@0.2.2/dist/ml5.min.js"type="text/javascript"></script><style>button{margin:2px;padding…

Facebook Like