Introducción al React

React es una biblioteca JavaScript de código abierto para crear

interfaces de usuario, desarrollado por Facebook. React se debe incluir
en un proyecto existente para añadir funcionalidades adicionales.

CT by Carlos Toro
JSX
Sintaxis
JSX es una extensión de la sintaxis de
JavaScript. Permite definir componentes
con estructura HTML similar, pero ofrece
más funcionalidades.
JSX vs HTML
JSX es muy similar a HTML, pero no son lo
mismo. La principal diferencia es que en
JSX podemos utilizar expresiones
JavaScript, mientras en HTML no.
Compilación
JSX no es ejecutado en los navegadores,
por lo tanto, antes de mandarlo al
navegador tenemos que compilarlo
utilizando alguna herramienta como
Babel. Hacen falta algunas
configuraciones pero se pueden
encontrar muchísimos ejemplos en línea.
Componentes
1 Componentes Funcionales

Es una función que devuelve JSX. Muy útil para componentes sencillos y que no cambian con el tiempo.

2 Componentes de Clase

Es una clase que extiende de React.Component. Útil para componentes complejos y que necesiten almacenar
estados.

3 Props vs State

Los Props son pasados como argumento a un componente mientras que el State es mantenido internamente
por el componente.
Estado y Ciclo de Vida
setState()
setState() es una función
proporcionada por React para
actualizar el estado de un
componente. Utiliza una cola de
actualizaciones para hacer
cambios en el state.
Ciclo de vida de los
componentes de clase
Los componentes de clase tienen
un ciclo de vida definido en la
clase. El más común incluye los
métodos constructor(), render(),
componentDidMount() y
componentWillUnmount().
Ciclo de vida de los
componentes funcionales
Cuando se introdujeron los Hooks
en React, los componentes
funcionales comenzaron a ser más
utilizados. La función más
utilizada es useEffect(), que
aparece después del componente
ha sido renderizado.
Manejando Eventos
this en los manejadores de eventos

En Javascript, los métodos creados dentro de una clase

no enlazan el valor this automáticamente. Es necesario
enlanzar el método con this.

1 2 3

Escuchando eventos Eventos Sintéticos

En React, los eventos están envueltos con la misma Los eventos sintéticos en React son los mismos que los
sintaxis que dentro de HTML, pero utilizamos camelCase eventos nativos de los navegadores, pero cada uno
en lugar de minúsculas. tiene un wrapper standarizado en React.
Renderizado Condicional

if Statements Operador ternario Operaciones lógicas

Para renderizar diferentes partes del El operador ternario es una forma más Con los operadores lógicos, AND y OR,
componente se pueden utilizar if limpia de hacer lo mismo que un if. podemos evitar la necesidad de utilizar
statements. if statements y condicionales.
Comunicación entre Componentes
Top-down: Pasando Props
Esta forma significa que hay un
componente principal que pasa
información a sus descendientes a
través de las propiedades.
Bottom-up: Usando Callbacks Contexto
Esta forma implica pasar una
React utiliza un sistema de
función desde el componente
contexto para compartir datos
principal hasta los descendientes.
globales que se actualizan en un
Los descendientes invocarán estas
componente pero se utilizan en
funciones con los datos
otro.
necesarios.
Conclusion
En resumen, React es una excelente herramienta que puede ayudar a
desarrollar interfaces de usuario más complejas. Hay algunos
conceptos clave que los desarrolladores tienen que aprender pero ya
estás listo para comenzar.