Dándole estilo a un class component

import React from ‘react’; class Cabecera extends React.Component{ render(){ let estilo= { color:”yellow” } return( < div style={estilo}>Esto es un class component</div> ) } } export default Cabecera; Continúa leyendo Dándole estilo a un class component

Dándole estilo a un componente funcional

import React from ‘react’; var Stateless = function () { let estilo= { “color”:”red”, “fontSize”:”24px” } return < div style={estilo}>Hola que tal, esto es un stateless functional component. </div>; } export default Stateless; Continúa leyendo Dándole estilo a un componente funcional

Ciclo de vida de los componentes en React

classMiComponenteextendsComponents{ constructor(){ // Enlazo (bind) eventos y/o inicializo estado } componentWillMount(){ // Se ejecuta antes de montar el componente // Se podría usar para hacer un setState() } render(){ // Contiene todos los elementos a renderizar // podrías usarlo para calcular propiedades (ej: concatenar una cadena) } componentDidMount(){ //Solo se lanza una vez //Ideal para llamar a una API, hacer un setInteval, etc } //Actualización: … Continúa leyendo Ciclo de vida de los componentes en React

Enlazando eventos del DOM en React

Para enlazar los eventos que reaccionen a un click dentro de los componentes, hay que utilizar onClick (on + el evento) y a esta le asignamos una función a ejecutar handleClick dentro del elemento que va a lanzar el evento. <divclassName=”Media”onClick={this.handleClick}> Para enlazar las propiedades (props) de nuestro componente a la clase Media, hay que utilizar el metodo constructor pasandole props y usando el metodo supertambien con las props como parametro. Es necesario cambiar el contexto de la función handleClick, para … Continúa leyendo Enlazando eventos del DOM en React