React

Ionic React

Ya sabes que Ionic se integra perfectamente con los tres principales frameworks de front en el momento de escribir este artículo, Angular, React y, recientemente, con Vue.js. Centrándonos en Ionic React, habría que destacar varios aspectos. En definitiva se trata de React, y esto significa que usa los estándares abiertos de la web y las capacidades integradas en los navegadores, por tanto es compatible com millones de bibliotecas de código web.

State en React

Ya has visto como configurar componentes con props en React, pero ¿cómo puedes definir comportamientos o interacciones con dichos componentes? Para ello necesitas que los componentes puedan definir su estado, y con las props es imposible, pues no pueden ser modificadas por el componente, sólo por su componente padre. Para esto existe this.state, donde los componentes pueden disponer de datos privados modificables a traves de la función this.setState(). Ya sabes que función usar para ajustar this.

Props en React

React es una biblioteca de JavaScript que se basa en la fabricación y combinación de componentes para construir interfaces de usuario. Cada componente se define por separado en un archivo javascript, y tiene un aspecto similar a este que sigue, el cual se encontraría en el archivo listaCompra.js: import React, { Component } from 'react'; import Articulo from './Articulo'; class ListaCompra extends Component { render() { return ( <ul> <Articulo cantidad="1">Pan</Articulo> <Articulo cantidad="6">Leche</Articulo> <Articulo cantidad="2">Huevos</Articulo> </ul> ); } } Las propiedades, que veremos en el código escritas como props, se usan para configurar componentes, y son pasadas desde los componentes padres a los componentes hijos.