React es una de las bibliotecas de JavaScript más populares para crear interfaces de usuario.

Si desea convertirse en un desarrollador front-end o encontrar un trabajo de desarrollo web, probablemente se beneficiaría de aprender React en profundidad.

En esta publicación, aprenderá algunos de los conceptos básicos de React, como crear un componente, la sintaxis JSX y Props. Si tiene poca o ninguna experiencia con React, esta publicación es para usted.

Para empezar, así es como puede instalar React.

¿Qué es JSX?

Lo primero que se dará cuenta después de instalar su primer proyecto React es que una función de JavaScript devuelve código HTML:

function App() { return ( 
 Edit src/App.js and save to reload. 
 ); }

Esta es una extensión de sintaxis especial y válida para React que se llama JSX (JavaScript XML). Normalmente, en proyectos relacionados con la interfaz, mantenemos el código HTML, CSS y JavaScript en archivos separados. Sin embargo, en React, esto funciona de manera un poco diferente.

En los proyectos de 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, puede separar su CSS en otro archivo.

Al principio, JSX puede parecer un poco extraño. 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 ( 
 {text} 
 ); }

Además, puede asignar etiquetas HTML a variables de JavaScript:

const message = 
React is cool!
;

O puede devolver HTML dentro de la lógica de JavaScript (como los casos if-else):

render() { if(true) { return 
YES
; } else { return 
NO
; } }

No entraré en más detalles de JSX, pero asegúrese de tener en cuenta las siguientes reglas al escribir JSX:

• Las etiquetas HTML y de componentes siempre deben estar cerradas
• Algunos atributos como "class" se convierten en "className" (porque la clase se refiere a clases de JavaScript), "tabindex" se convierte en "tabIndex" y debe escribirse camelCase
• No podemos devolver más de un elemento HTML a la vez, así que asegúrese de envolverlos dentro de una etiqueta principal:

return ( 
Hello
World
 );

• o como alternativa, puede envolverlos con etiquetas vacías:

return (  
Hello
World
  );

También puede ver mi tutorial React for Beginners para obtener más información:

¿Qué son los componentes funcionales y de clase?

Después de acostumbrarse a la sintaxis JSX, lo siguiente que debe comprender es la estructura basada en componentes de React.

Si vuelve a visitar el código de ejemplo en la parte superior de esta publicación, verá que el código JSX está siendo devuelto por una función. Pero la función App () no es una función ordinaria, en realidad es 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 interfaz de usuario en partes más pequeñas. Por ejemplo, si estuviéramos construyendo la interfaz de usuario de Twitter con React:

En lugar de construir toda la interfaz de usuario en un solo archivo, podemos y debemos dividir todas las secciones (marcadas con rojo) en partes independientes más pequeñas. En otras palabras, estos son componentes.

React tiene dos tipos de componentes: funcionalesy clase. Veamos cada uno ahora con más detalle.

Componentes funcionales

El primer tipo de componente recomendado en React son los componentes funcionales. Un componente funcional es básicamente una función de JavaScript / ES6 que devuelve un elemento React (JSX). Según los documentos oficiales de React, la función a continuación es un componente funcional válido:

function Welcome(props) { return 
Hello, {props.name}
; }

Alternativamente, también puede crear un componente funcional con la definición de función de flecha:

const Welcome = (props) => { return 
Hello, {props.name}
; }

Esta función es un componente de React válido porque acepta un único argumento de objeto "props" (que significa propiedades) con datos y devuelve un elemento de React. - reactjs.org

Para poder utilizar un componente más adelante, primero debe exportarlo para poder importarlo en otro lugar:

function Welcome(props) { return 
Hello, {props.name}
; } export default Welcome;

Después de importarlo, puede llamar al componente como en este ejemplo:

import Welcome from './Welcome'; function App() { return ( ); }

Entonces, un componente funcional en React:

• es una función de JavaScript / ES6
• debe devolver un elemento React (JSX)
• siempre comienza con una letra mayúscula (convención de nomenclatura)
• toma props como parámetro si es necesario

¿Qué son los componentes de clase?

El segundo tipo de componente es el componente de clase. Los componentes de clase son clases de ES6 que devuelven JSX. A continuación, verá nuestra misma función de bienvenida, esta vez como un componente de clase:

class Welcome extends React.Component { render() { return 
Hello, {this.props.name}
; } }

A diferencia de los componentes funcionales, los componentes de la clase deben tener un método render () adicional para devolver JSX.

¿Por qué utilizar componentes de clase?

Solíamos usar componentes de clase debido al "estado". En las versiones anteriores de React (versión <16.8), no era posible usar el estado dentro de los componentes funcionales.

Por lo tanto, necesitábamos componentes funcionales solo para representar la interfaz de usuario, mientras que usaríamos componentes de clase para la gestión de datos y algunas operaciones adicionales (como métodos de 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 ganchos en mis siguientes publicaciones, así que no les importe por ahora).

Un componente de clase:

• es una clase ES6, será un componente una vez que 'extienda' un componente de React.
• toma Props (en el constructor) si es necesario
• debe tener un render ()método para devolver JSX

¿Qué son los accesorios en React?

Otro concepto importante de componentes es cómo se comunican. React tiene un objeto especial llamado prop (significa propiedad) que usamos para transportar datos de un componente a otro.

Pero tenga cuidado: los accesorios solo transportan datos en un flujo unidireccional (solo de componentes principales a secundarios). No es posible con los accesorios pasar datos de un niño a un padre, o a componentes en el mismo nivel.

Revisemos la función App () anterior para ver cómo pasar datos con accesorios.

Primero, necesitamos definir un accesorio en el Componente de bienvenida y asignarle un valor:

import Welcome from './Welcome'; function App() { return ( ); }

Los accesorios son valores personalizados y también hacen que los componentes sean más dinámicos. Dado que el componente de bienvenida es el hijo aquí, necesitamos definir los accesorios en su padre (aplicación), para que podamos pasar los valores y obtener el resultado simplemente accediendo al "nombre" de la propiedad:

function Welcome(props) { return 
Hello, {props.name}
; }

Los accesorios de React son realmente útiles

Entonces, los desarrolladores de React usan accesorios para pasar datos y son útiles para este trabajo. Pero, ¿qué pasa con la gestión de datos? Los accesorios se utilizan para pasar datos, no para manipularlos. Voy a cubrir la gestión de datos con React en mis futuras publicaciones aquí en freeCodeCamp.

Mientras tanto, si desea obtener más información sobre el desarrollo web y de React, no dude en suscribirse a mi canal de YouTube.

¡Gracias por leer!