React es una de las bibliotecas de JavaScript más populares para la construcción de interfaces de usuario.
Si quieres convertirte en un desarrollador front-end o encontrar un trabajo de desarrollo web, probablemente te beneficiarías de aprender React en profundidad.
En este post, vas a aprender algunos de los fundamentos de React como la creación de un componente, la sintaxis JSX, y Props. Si no tienes ninguna o poca experiencia con React, este post es para ti.
Para empezar, aquí tienes cómo instalar React.
¿Qué es JSX?
Lo primero de lo que te darás cuenta después de instalar tu primer proyecto React es que una función JavaScript devuelve algo de código HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Esta es una extensión de sintaxis especial y válida para React que se llama JSX (JavaScript XML). Normalmente, en los proyectos relacionados con el frontend, mantenemos el código HTML, CSS y JavaScript en archivos separados. Sin embargo en React, esto funciona un poco diferente.
En los proyectos React, no creamos archivos HTML separados, porque JSX nos permite escribir HTML y JavaScript combinados en el mismo archivo, como en el ejemplo anterior. Sin embargo, puedes separar tu CSS en otro archivo.
Al principio, JSX puede parecer un poco raro. Pero no te preocupes, te acostumbrarás.
JSX es muy práctico, porque también podemos ejecutar cualquier código JavaScript (lógica, funciones, variables, etc.) dentro del HTML directamente usando llaves { }, así:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}También puedes asignar etiquetas HTML a variables JavaScript:
const message = <h1>React is cool!</h1>;O puedes devolver HTML dentro de la lógica de JavaScript (como los casos if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}No entraré en más detalles de JSX, pero asegúrate de tener en cuenta las siguientes reglas mientras escribes JSX:
- Las etiquetas HTML y de componentes deben estar siempre cerradas < />
- Algunos atributos como «class» se convierten en «className» (porque class se refiere a clases de JavaScript), «tabindex» se convierte en «tabIndex» y deben escribirse camelCase
- No podemos devolver más de un elemento HTML a la vez, así que asegúrate de envolverlos dentro de una etiqueta padre:
return ( <div> <p>Hello</p> <p>World</p> </div>);- o como alternativa, puedes envolverlos con etiquetas vacías:
return ( <> <p>Hello</p> <p>World</p> </>);También puedes ver mi tutorial de React para principiantes para más información:
¿Qué son los componentes de clase funcionales &?
Después de acostumbrarse a la sintaxis JSX, lo siguiente que hay que entender es la estructura basada en componentes de React.
Si vuelves a ver el código de ejemplo al principio de este post, verás que el código JSX está siendo devuelto por una función. Pero la función App( ) no es una función ordinaria – es en realidad un componente. Entonces, ¿qué es un componente?
¿Qué es un componente?
Un componente es un bloque de código independiente y reutilizable que divide la UI en piezas más pequeñas. Por ejemplo, si estuviéramos construyendo la UI de Twitter con React:
En lugar de construir toda la UI en un solo archivo, podemos y debemos dividir todas las secciones (marcadas con rojo) en piezas independientes más pequeñas. En otras palabras, son componentes.
React tiene dos tipos de componentes: funcionales y de clase. Veamos ahora cada uno de ellos con más detalle.
Componentes funcionales
El primer y recomendado tipo de componente en React son los componentes funcionales. Un componente funcional es básicamente una función JavaScript/ES6 que devuelve un elemento React (JSX). Según la documentación oficial de React, la función que aparece a continuación es un componente funcional válido:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativamente, también se puede crear un componente funcional con la definición de la función flecha:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Esta función es un componente React válido porque acepta un único argumento de objeto «props» (que significa propiedades) con datos y devuelve un elemento React. – reactjs.org
Para poder utilizar un componente más adelante, primero hay que exportarlo para poder importarlo a otro lugar:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Después de importarlo, se puede llamar al componente como en este ejemplo:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Así que un componente funcional en React:
- es una función JavaScript/ES6
- debe devolver un elemento React (JSX)
- siempre comienza con mayúscula (convención de nomenclatura)
- toma props como parámetro si es necesario
¿Qué son los Class Components?
El segundo tipo de componente es el componente de clase. Los componentes de clase son clases ES6 que devuelven JSX. A continuación, puedes ver nuestra misma función Welcome, esta vez como un componente de clase:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}A diferencia de los componentes funcionales, los componentes de clase deben tener un método adicional render( ) para devolver JSX.
¿Por qué usar componentes de clase?
Solíamos usar componentes de clase por el «estado». En las versiones anteriores de React (versión < 16.8), no era posible utilizar el estado dentro de los componentes funcionales.
Por lo tanto, necesitábamos componentes funcionales para renderizar la UI solamente, mientras que utilizaríamos componentes de clase para la gestión de datos y algunas operaciones adicionales (como los métodos del ciclo de vida).
Esto ha cambiado con la introducción de React Hooks, y ahora también podemos usar estados en componentes funcionales. (Cubriré el estado y los hooks en mis siguientes posts, así que no los tengáis en cuenta por ahora).
Una clase componente:
- es una clase ES6, será un componente una vez que ‘extienda’ un componente React.
- Toma Props (en el constructor) si es necesario
- debe tener un método render( ) para devolver JSX
¿Qué son los Props en React?
Otro concepto importante de los componentes es cómo se comunican. React tiene un objeto especial llamado prop (significa propiedad) que utilizamos para transportar datos de un componente a otro.
Pero cuidado – los props sólo transportan datos en un flujo unidireccional (sólo de los componentes padre a los hijos). No es posible con props pasar datos de hijo a padre, o a componentes del mismo nivel.
Volvamos a ver la función App( ) anterior para ver cómo pasar datos con props.
Primero, necesitamos definir una prop en el componente Welcome y asignarle un valor:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Las props son valores personalizados y también hacen que los componentes sean más dinámicos. Como el componente Welcome es el hijo aquí, necesitamos definir props en su padre (App), para poder pasar los valores y obtener el resultado simplemente accediendo a la prop «name»:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
Las props de React son realmente útiles
Así que los desarrolladores de React utilizan props para pasar datos y son útiles para este trabajo. Pero, ¿qué pasa con la gestión de los datos? Los props se usan para pasar datos, no para manipularlos. Voy a cubrir la gestión de datos con React en mis futuros posts aquí en freeCodeCamp.
Mientras tanto, si quieres aprender más sobre React & desarrollo web, no dudes en suscribirte a mi canal de YouTube.
¡Gracias por leer!