Pensar cómo un programador de ReactJS

Piensa cómo un programador de ReactJS
ReactJS es una librería que nos permite desarrollar la interfaz del cliente a través de componentes, podemos desarrollar un componente header, un componente footer y un componente panel, por ejemplo, de esta forma es muy sencillo construir grandes y pequeñas aplicaciones web con ReactJS.

Una de las tareas más complejas cuando empiezas con ReactJS es pensar cómo un programador de ReactJS, si vienes trabajando con otros frameworks/librerías javascript que se encargan de realizar las tareas de construir y representar interfaces, probablemente tendrás que cambiar un poco el chip cuando empieces con ReactJS, pero una vez lo entiendes es sumamente sencillo construir cualquier aplicación.

Para los ejemplos del tutorial vamos a utilizar CreateReactApp, una herramienta para crear proyectos completamente configurados con ReactJS.

Definición de componentes en ReactJS

Existen varias sintaxis para crear componentes en ReactJS, funciones simples, funciones con la notación de flecha y clases con ES6.

Los 3 componentes anteriores se van a comportar de la misma forma, simplemente mostrarán dentro de un h1 el valor de props.msg, vamos a ver lo sencillo que es utilizar el componente HelloWorld.

Un componente en ReactJS debe comenzar en mayúsculas, es la forma en la que ReactJS sabe que se trata de un componente y no de una etiqueta html.

Esa es la esencia de ReactJS, toda la información a los componentes hijos se pasa a través de props, el padre las define en el uso del componente y el hijo las define y utiliza.

Herencia en ReactJS

En ReactJS la herencia no existe, en lugar de herencia, tenemos a nuestra disposición los componentes y sus propiedades, de esta forma podemos extender la funcionalidad de un componente de forma muy sencilla, más aún cuando hacemos uso de props.children.

Aquí tenemos un componente llamado PanelComponent, el cual no define nada, sino que utiliza props para que pueda ser reutilizado al 100%, además, dentro del cuerpo de PanelComponent utilizamos algo llamado this.props.children, vamos a ver lo sencillo que es utilizarlo.

Lo más importante es ver que los componentes en ReactJS no son etiquetas autocontenidas, sino que pueden ser de apertura y cierre, de esta forma, el texto que aparece dentro de las etiquetas es lo mostrará this.props.children.

De esta forma tan sencilla podemos definir componentes base y de ahí en adelante extender sus propiedades y añadir información extra a través de this.props.children.

Tipado de datos en ReactJS

Otra cosa que tampoco existe de forma directa en ReactJS es el tipado de datos, aunque es cierto que existe la posibilidad de utilizar typescript.

Para poder “tener tipado” sin realizar ninguna configuración extra en ReactJS lo más sencillo es utilizar propTypes, por ejemplo, podríamos añadirle propTypes a nuestro componente PanelComponent.

De esta forma, si alguna de las reglas aplicadas en propTypes no se cumple, veremos un warning en entorno de desarrollo, así, aparte de tener algo más de control en la aplicación, también podremos saber el tipo de datos que acepta cada propiedad.

Manejar eventos en ReactJS

El uso de eventos también es algo muy fácil de manejar, por ejemplo, vamos a añadir un evento click al panel que acabamos de desarrollar.

Puedes ver que de la misma forma, seguimos haciendo uso de this.props, en este caso onClicked, de esta forma el componente no necesita manejar ningún dato, sólo recibirlo.

Ahora vamos a añadir la lógica necesaria al componente CustomPanel para hacer uso del evento click que hemos definido.

Ya sabemos cómo podemos ejecutar eventos en ReactJS entre componentes, siempre es igual y así de sencillo.

Manejar el estado de datos en ReactJS

El estado de datos debe se aquella información que pueda cambiar a lo largo de la vida de la aplicación y no puede ser calculada, por ejemplo, el valor de un campo de formulario.

Para entenderlo mejor vamos a crear un sencillo ejemplo donde vamos a ver cómo inicializar el estado, actualizarlo mientras el usuario introduzca datos en el input y mostrar los cambios.

Así de sencillo es manejar la información dinámica en ReactJS.

Variables de entorno en ReactJS

Algo también muy importante es el manejo de variables de entorno en ReactJS, aunque existen varias formas de hacerlo, la mayoría difieren dependiendo del sistema operativo, lo más sencillo es hacer uso de archivos .env, veamos un ejemplo.

Algo importante es que las variables de entorno deben comenzar por REACT_APP_, también debemos saber que para que puedan ser utilizadas debemos reiniciar el servidor.

Para poder utilizar las variables ya definidas en el archivo .env simplemente debemos hacer lo siguiente.

Y eso es todo, espero que te haya parecido interesante la entrada y puedas entender un poco mejor lo sencillo que es convertirse en un programador de ReactJS, si te ha gustado comparte el post para que llegue a más compañeros.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR