Definiciones de React

reactDefinitions.md

💥 Definiciones en React 💥

Similitudes entre HTML y React Native

<div> === <View>
<p> || span === <Text>
<button> === <TouchableHighlight>
<img /> === <Image />
<input /> === <TextInput />

Component

Un un componente en React simplemente es una pieza de UI (user interface), que tiene una funcionalidad independiente definida. Es un trozo del sitio web que cumple un objetivo, por ejemplo, una barra de búsqueda es un componente, pues tiene una función independiente.

En react, un componente se define usando clases, la estructura básica de un componente es:

import React, {Component} from 'react';

class MiPrimerComponente extends Component {
  render() {
    return(
      <h1>Soy un componente...!!!</h1>
    );
  }
}

export default MiPrimerComponente;

Este componente nos devuelve un elemento h1, que si lo quisieramos importar import MiPrimerComponente from './ruta/a/MiPrimerComponente' y luego lo usaremos con etiquetas <MiPrimerComponente></MiPrimerComponente>. Un componente puede estar compuesto por otros componentes, formando así un árbol de componentes.

Props

Son las propiedades props, la manera que un componente superior manda información a componentes inferiores.

Los props siempre son inmutables que no cambian vamos.

Para un ejemplo vamos a crear un nuevo archivo dentro de src/components/ llamado Mensaje.js y vamos a crear un componente dentro.

// src/components/Mensaje.js
import React, {Component} from 'react';

class Mensaje extends Component {
  render () {
    const sytles = {
      color: this.props.color,
      fontSize: this.props.size
    }
    
    return (
      <h3 style={styles}>{this.props.contenido}</h3>
    );
  }
}

export default Mensaje;

Vemos que este componente nos devuelve un h3 y espera recibir 3 props, color, size y contenido. Los props nos sirven para definir el color, tamaño y contenido del mensaje.

Vamos a utilizarlo para verlo más claro:

import React, { Component } from 'react';
import {Container, Button} from 'semantic-ui-react';
import Mensaje from './Mensaje';

class Root extends Component {
  render () {
    return (
      <Container textAlign='center'>
        <Mensaje size='30px' color='#ff0000' contenido='AHORA' />
        <Mensaje size='40px' color='#00ff00' contenido='ENTIENDO' />
        <Mensaje size='60px' color='#0000ff' contenido='LOS PROPS :D' />
        <Button content='Boton Cool' color='blue' />
      </Container>
    );
  }
}

export default Root;

Hemos importado el componente Mensaje, y luego hacemos uso de dicho componente 3 veces enviándole distintos props.

State

El state es el estado de un componente.

El estado de un componente son aquellas carácteristicas propias del componente, es decir, que dependen únicamente del propio componente.

Por ejemplo, cuando tenemos un componente que hace peticiones a un servidor, entonces puede estar en dos estados posibles, cargando o finalizado.

Vamos a ver esto con un simple ejemplo creando el archivo Cargando.js en src/components/ con el siguiente contenido:

import React, {Component} from 'react';
import {Button, Loader} from 'semantic-ui-react';

class Cargando extends Component {
  constructor (args) {
    super(args)
    this.state = {
      loading: false
    }
    this.changeLoading = this.changeLoading.bind(this)
  }
  
  changeLoading () {
    this.setState((prevState, props) {
      return {loading: !prevState.loading}
    })
  }
  
  render () {
    let contenido
    if (this.state.loading) {
      contenido = <Loader inline active />
    } else {
      contenido = <span>No esta cargando</span>
    }
    
    return (
      <div>
        {contenido}
        <Button content='CambiarEstado' onClick={this.changeLoading} />
      </div>
    )
  }
}

export default Cargando;

Para definir el state de un componente se lo debe de hacer dentro del método constructor, en este caso le asignamos un objeto con la clave loading.

Luego creamos el método changeLoading() que se encargará de cambiar el estado de false a true y viceversa. ¿Cómo lo hace?, simple, los componentes vienen cargados con el método: this.setState(() => {}) el cual nos ayuda a modificar el estado de neustro componente y por ende actualizar el mismo, recive dos argumentos: prevState y props que podemos modificar el estado en base a estos.

En el método render le asignamos un Loader o un span de acuerdo al state de nuestro componente.

Para usarlo simplemente lo importamos y usamos en src/Root.js.

import React, { Component } from 'react';
import {Container, Button} from 'semantic-ui-react';
import Mensaje from './Mensaje';
import Cargando from './Cargando';

class Root extends Component {
  render () {
    return (
      <Container textAlign='center'>
        <Mensaje size='30px' color='#ff0000' contenido='AHORA' />
        <Mensaje size='40px' color='#00ff00' contenido='ENTIENDO' />
        <Mensaje size='60px' color='#0000ff' contenido='LOS PROPS :D' />
        <Button content='Boton Cool' color='blue' />
        <br />
        <Cargando />
      </Container>
    )
  }
}

export default Root;

El componente entero se vuelve a cargar (ejecutando el método render) cada vez que llamamos al mtodo this.setState(), es decir, cada vez que cambiamos el state.

Diferencias entre props y state

Los props y state hacen cosas similares, pero son usados de diferente manera.

Props es usado para pasar datos de componentes padres a subcomponentes, son inmutables y no deberían de cambiar.

State es usado apra datos cambiantes. Los componentes vuelven a llamar a render cuando este cambia.