TypeScript / React – propiedades

Bienvenidos sean a este post, hoy hablaremos sobre los propiedades de los componentes.

Una particularidad que nos provee react al momento de crear componentes es la posibilidad de establecer propiedades y estos serian transmitidos por los componentes padres a los componentes hijos, y entre las propiedades podemos incluir propiedades de visualizacion como manejadores de eventos. Para esta ocasion vamos a crear un nuevo proyecto, para ello ejecuten el siguiente comando:

$ npx create-react-app ejemplo03 --template typescript

Una vez finalizada la creacion de la aplicacion, ingresen al directorio creado, ejemplo03, y ejecuten este comando:

$ npm start

Con nuestra aplicacion corriendo podremos acceder a esta mediante la siguiente URL:

http://localhost:3000/

Ahora desde otra terminal ingresaremos al directorio de la aplicacion nuevamente y ahi ejecutaremos los siguientes comandos:

$ npm install --legacy-peer-deps @material-ui/core

$ npm install --legacy-peer-deps @material-ui/icons

Esto nos instala no solo las materiales para las interfaces de usuarios sino tambien los iconos. Deben agregar esa opcion porque estan proximos a desecharse. Nuestro siguiente paso sera crear un nuevo archivo con el nombre de MiBoton.tsx en el directorio src, y le agregaremos el siguiente codigo:

import { Button } from "@material-ui/core";
import React from "react";
export class MiBoton extends React.Component {
        render() {
                return (
                  <Button color="primary">Cliqueame</Button>
                )
        }
}

Este solo creara un boton para mostrar en pantalla. Para ello primero importaremos al elemento Button de los materiales que instalamos anteriormente. Lo siguiente sera importar a la clase React para poder crear nuestro componente. Despues de esto definiremos la clase que sera el boton que mostraremos, esta sera un componente de react y mediante render la mostraremos. Aqui no pasamos el tag de button sino el que importamos al inicio del archivo, le aplicamos un color y un texto. Con nuestro boton «creado» nos resta implementarlo y para ello modificaremos al archivo App.tsx en src de la siguiente manera:

import React from 'react';
import './App.css';
import { MiBoton } from './MiBoton';

class App extends React.Component {
        render() {
          return (
                <MiBoton/>
          )
        }
}

export default App;

Nuevamente primero importaremos la clase React, para lo mismo que en el otro archivo, tambien importamos al archivo con nuestros estilos css y por ultimo el «boton» que creamos en el archivo anterior. Lo siguiente es definir una clase llamada App que la convertiremos en un componente de react, en ella usaremos a nuevamente render para graficarlo y en el return pasaremos la clase el boton que importamos. Para finalmente exportarla y que pueda ser accedida.

Si lo prueban tendremos una pagina con un boton que solo muestra el mensaje que le establecimos. Es decir, hasta este momento tenemos una pagina que «renderiza» el elemento Button proveniente de material-ui. Para poder personalizar al componente del boton aplicaremos un conjunto de propiedades. Para ello, lo haremos mediante el componente padre y para ello debemos volver a MiBoton.tsx y lo modificaremos de la siguiente manera:

import { Button } from "@material-ui/core";
import React from "react";

export interface IMiBotonProps {
        nombreBoton: string;
}

export class MiBoton extends React.Component<IMiBotonProps> {
        render() {
                return (
                  <Button color="primary">
                        {this.props.nombreBoton}
                  </Button>
                )
        }
}

Lo primero que agregaremos es una interfaz, donde estableceremos una propiedad que representara al nombre el boton, nombreBoton. La siguiente modificacion es al momento de establecerlo como Componente, le pasamos como tipo la interfaz anterior para poder acceder a los elementos de esta. Lo proximo es en el boton donde removemos el texto y le pasamos la propiedad de la interfaz. Observen que usamos el this para decirle que no es de la clase sino del objeto, el props nos permite acceder a la propiedad de la interfaz. Para el siguiente paso debemos ir a App.tsx y modificaremos a la funcion render de la siguiente manera:

        render() {
          return (
                <MiBoton nombreBoton="Haz click"/>
          )
        }

En este caso tomamos al elemento MiBoton y le pasamos la propiedad de la interfaz con el mensaje que ahora se asignara en el mismo. Recuerden que lo establecimos en la clase que lo renderiza. Si miran el browser deben tener una salida como esta

Si alterrnan el texto en la propiedad, este afectara automaticamente al del boton. Pero esta forma de trabajar no es solo para las propiedades. Tambien podemos manejar otros temas pero de eso hablaermos en el proximo post.

En resumen, hoy hemos visto a props, que es, para que sirve, como se aplica, que nos permite y un ejemplo practico para verlo en accion. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.