Primeros pasos en React (parte 2 de 3)

Junio 21, 2022

Pedro Flores

ReactJS

En el artículo anterior aprendimos la instalación de React, los componentes, su ciclo de vida, así como las clases de componentes y componentes simples.

En este artículo avanzamos con los conceptos básicos de props (manejo de datos/propiedades), states (el estado del componente) y events (eventos que recibirá nuestro componente desde el mundo externo).

Conceptos básicos

Props

Es la forma de manejar datos entre componentes React con propiedades.

Un ejemplo de esto, en el archivo /src/Test.js primero vamos a remover la información que teniamos:

const TestBody = () => {
    return (
        <div />
    )
}

En nuestro archivo /src/AppTest.js vamos a enviar información necesaria para ser utilizada con nuestra función TestBody. Esta informacion la enviamos dentro de render() const name = [{name: ‘pedro’, lastName: ‘perez’}]; y finalmente vamos a enviar name como una propiedad del componente Test:

import React, {Component} from 'react'
import Test from './Test'

class AppTest extends Component {
  render() {
    const name =[{name: ‘pedro’, lastName: ‘perez’}];
    return (
      <div className="containerTest">
        <Test names={name} />
      </div>
    )
  }
}

export default AppTest;

En nuestro archivo /src/Test.js vamos a capturar esta propiedad simplemente obteniendo con this.props

import React, {Component} from 'react'
const TestBody = (props) => {
  const content = props.names.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

class Test extends Component {
  render() {
    const names = this.props.names;

    return (
        <TestBody names={names}/>
    )
  }
}

export default Test

En conclusión, las propiedades son una manera de enviar datos en componentes React, sin embargo los componentes no pueden cambiar las propiedades, solamente son de lectura.

Código Completo: props

States

El estado es una propiedad en la que podemos actualizar datos privados de un componente.

En nuestro caso en el archivo /src/AppTest.js vamos a mover nuestra constante name al objeto state

class AppTest extends Component {
    state = {
        name:[
            {name: ‘pedro’, lastName: ‘perez’}
        ]
    }

En este momento nuestros datos están contenidos en un estado, para poder acceder al estado usamos como this.state.name. Para poder actualizarlo utilizamos this.setState(), pero para nuestro caso vamos solamente a visualizar el state

import React, {Component} from 'react'
import Test from './Test'

class AppTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:[
                {name: 'pedro', lastName: 'perez'}
            ]
        }

        
      }
    render() {
        const name =this.state
        return (
          <div className="containerTest">
            <Test names={name} />
          </div>
        )
    }
}
export default AppTest;

Y nuestro archivo /src/Test.js no quedaria de la siguente manera

import React, {Component} from 'react'

const TestBody = (props) => {
  const content = props.names.name.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

class Test extends Component {
render() {
  const names = this.props.names;
  
  return (
      <TestBody names={names}/>
  )
}
}

export default Test

Código Completo: states

Manejo de eventos

React maneja los eventos de la misma manera que lo hace JavaScript utilizando eventos onclick, onchange, etc.

Para nuestro ejemplo vamos a crear en el archivo /src/Test.js un botón el cual va a enviar un alert() informando que se realizó el evento click.

import React, {Component} from 'react'

const TestBody = (props) => {
  const content = props.names.name.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

class Test extends Component {

    submitForm = (event) => {
        alert(`Evento Click ejecutado`);
    }
  
    render() {
      const names = this.props.names;

      return (
        <>
          <TestBody names={names}/>
          <input type="button" value="Submit" onClick={this.submitForm} />
        </>

      )
    }
}

export default Test

Código Completo: events

Cerrando esta entrega…

Recapitulando, pudimos continuar con el aprendizaje de los componentes basicos como son las propiedades (props), estados (states), asi como el manejo de eventos, los cuales nos van a ayudar a poder entender el funcionamiento de la codificación de React.

En el siguiente artículo vamos a seguir nuestro aprendizaje con los conceptos de Hooks y sus 3 hooks básicos.