Category Archives: React

Componente Funcional o de Clase? Diferencias

Existen 3 principales diferencias: Sintaxis: Los dos aceptan props como argumentos y hacen return de un componente. Sin embargo el código del componente de clase es más extenso. State: Los componentes funcionales o también conocidos como State-less Function, como son funciones normales de JS, no permiten usar setState. Esto significa que cada ves que veas […]

Curso Básico React 2019: #5 – Estados (State) y Ciclo de Vida

Considerando el ejemplo del reloj de una de los capitulos anteriores. Hemos aprendimos solo una manera de actualizar la interfaz del usuario. Para actualizar llamamos ReactDOM.render() para cambiar el output a renderizar. En esta sección vamos a aprender a encapsular el componente Clock y hacerlo realmente réutilisable. Configurará su propio temporizador y se actualizará así […]

Curso Básico React 2019: #4 – Componentes y Props

Los componentes en React me permiten dividir o cortar la interfaz gráfica de una aplicación en diferentes partes (individuales y reutilizables). Conceptualmente, los componentes se pudieran comparar con las funciones de Javascript. Ya que los componentes, como las funciones, aceptan “inputs” arbitriarios. En React estos “inputs” aribitriarios se llaman “props” y retornan los elementos React […]

Parte #4: Configuracion de tema grafico de apoyo a stylos

Resumen: En este tutorial vamos a poner un poco de orden creando una carpeta “Theme” en nuestro proyecto. Vamos a guardar todos los ficheros que tienen informacion de configuracion global de la interfaz de nuestra applicacion completa. Por que asi por ejemplo podremos cambiarla con las configuraciones de otra app y aplicar nuevos estilos a […]

Bonus: 3 Formas de jugar o aplicar estilos en React Native

Opción #1: Implementación de stylos muy básicos. Opción #2: Intermedio En esta opcion veremos como utilizar el objeto StyleSheet para decorar nuestros componentes y pantallas. El primer paso de la opción #2 es agregar el elemento StyleSheet a la importación de los elementos de React Native, en la cabecera. Debe de quedar así: import { […]

Parte #2: Creación y estructura de pantalla genérica en React Native

React Native no tiene una manera estricta para guardar o poner orden en el codigo (acomodo de archivos y carpetas). Sin embargo en este curso lo iremos haciendo de una manera que a mi me funciona para llevar un orden. Primero que todo creare una carpeta que se llama “Containers” en donde pondré todas mis […]

Parte #1: Como crear una App con React Native?

Requisitos: Creo que se tiene que instalar React y React Native globalmente o al menos localmente para poder empezar. Checarlo antes de publicar. Resumen: El propósito es crear la app por defecto de React Native. Una ves creándola, la probaremos y analizaremos los archivos más importantes que se crean automáticamente al correr los siguientes comandos […]

WhatsApp chat