👶🏼 🐾 🙀 Tutorial React Parte 2: Componentes funcionales 🤲🏻 👩‍🎓 🔞

En uno de nuestros artículos anteriores, le preguntamos si es aconsejable hacer una serie de publicaciones tradicionales basadas en este curso React. Apoyaste nuestra idea. Por lo tanto, hoy presentamos a su atención la continuación del curso. Aquí hablamos de componentes funcionales.

→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados en clases
→ Parte 14: taller sobre componentes basados en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 6. Componentes funcionales

→ Original

En la lección práctica anterior, hablamos sobre el hecho de que no es necesario colocar todo el código JSX que forma los elementos HTML en el argumento del método ReactDOM.render() . En nuestro caso, estamos hablando de una lista con viñetas, una que se describe a continuación.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

Imagine lo que necesita mostrar, utilizando el mismo enfoque, una página web completa en la que hay cientos de elementos. Si se hace esto, será prácticamente imposible mantener dicho código normalmente. Cuando hablamos sobre los motivos de la popularidad de React, uno de ellos fue su soporte para componentes reutilizables en esta biblioteca. Ahora hablaremos sobre cómo crear componentes funcionales de React.

Estos componentes se denominan "funcionales" debido al hecho de que los crean mediante la construcción de funciones especiales.

Cree una nueva función y MyApp el nombre MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

El nombre de la función se hace exactamente por la razón de que aquí se usa el esquema de nombres de las funciones de constructor. Sus nombres (de hecho, los nombres de los componentes) están escritos en estilo camello; las primeras letras de las palabras en las que consisten están hechas en mayúsculas, incluida la primera letra de la primera palabra. Debe cumplir estrictamente con esta convención de nomenclatura para tales funciones.

Los componentes funcionales están dispuestos de manera bastante simple. Es decir, en el cuerpo de la función debe haber un comando que devuelva el código JSX, que representa el componente correspondiente.

En nuestro ejemplo, es suficiente tomar el código con viñetas y organizar el retorno de este código desde el componente funcional. Así es como podría verse:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> }

Y aunque en este caso todo funcionará como se esperaba, es decir, el comando return devolverá todo este código, se recomienda encerrar construcciones similares entre paréntesis y aplicar otra convención adoptada en React al formatear el código del programa. Consiste en colocar elementos individuales en líneas separadas y alinearlos en consecuencia. Como resultado de aplicar las ideas anteriores, el código de nuestro componente funcional se verá así:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) }

Con este enfoque, el marcado devuelto por el componente es muy similar al código HTML normal.

Ahora, en el método ReactDOM.render() , puede crear una instancia de nuestro componente funcional pasándolo a este método como primer argumento y encerrándolo en una etiqueta JSX.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )

Puede notar que aquí se usa una etiqueta de cierre automático. En algunos casos, cuando necesita crear componentes que tienen una estructura más compleja, los diseños similares se crean de manera diferente, pero por ahora, usaremos esas etiquetas de cierre automático.

Si actualiza la página formada por el código anterior, su apariencia será la misma que antes del marcado de la lista con viñetas en el componente funcional.

El marcado devuelto por los componentes funcionales obedece las mismas reglas que consideramos al aplicar el método ReactDOM.render() al primer parámetro. Es decir, es imposible que contenga elementos JSX que siguen uno tras otro. Intentar colocar cualquier otro elemento después del elemento <ul> en el ejemplo anterior, digamos - <ol> , dará como resultado un error. Puede evitar este problema, por ejemplo, simplemente envolviendo todo lo que devuelve un componente funcional en un elemento <div> .

Quizás ya haya comenzado a sentir las poderosas oportunidades que nos brinda el uso de componentes funcionales. En particular, estamos hablando de crear nuestros propios componentes que contengan fragmentos de código JSX, que es una descripción del marcado HTML que aparece en la página web. Dichos componentes se pueden organizar juntos.

En nuestro ejemplo, hay un componente que muestra una lista HTML simple, pero a medida que creamos aplicaciones cada vez más complejas, desarrollaremos componentes que muestren otros componentes que creamos. Como resultado, todo esto se convertirá en elementos HTML ordinarios, pero a veces, para la formación de estos elementos, es posible que necesite docenas de sus propios componentes.

Como resultado, cuando creamos más y más componentes, los colocaremos en archivos separados, pero por ahora es importante que domine lo que acabamos de comentar, que se acostumbre a los componentes funcionales. Durante el curso, creará estructuras de archivos cada vez más complejas.

En esta lección, examinamos los conceptos básicos de los componentes funcionales, y en la siguiente aplicamos los conocimientos adquiridos en la práctica.

Lección 7. Taller. Componentes funcionales

→ Original

▍Trabajo

Prepare un proyecto básico de React.
Cree un componente funcional MyInfo que forme los siguientes elementos HTML:
1. Elemento <h1> con tu nombre.
2. Un párrafo de texto (elemento <p> ) que contiene su historia corta sobre usted.
3. Una lista, marcada ( <ul> ) o numerada ( <ol> ), con una lista de los tres lugares que le gustaría visitar.
Enumere la instancia del componente MyInfo en la página web.

▍ Tarea adicional

Estilice los elementos de la página aprendiendo cómo hacerlo usted mismo (busque en Google). Cabe señalar que hablaremos más sobre los componentes de estilo en este curso.

Nota: bloque plegable

▍Solución

Aquí estamos satisfechos con la misma página HTML que utilizamos anteriormente. Un archivo con código React también se verá bastante estándar. Es decir, importamos las bibliotecas, creamos el esqueleto del componente funcional MyInfo y llamamos al método render() del objeto ReactDOM , pasándole el componente que se mostrará en la página y un enlace al elemento de página en el que se debe mostrar este componente. En esta etapa, el código se verá así:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root"))

Ahora debe devolver el código JSX de MyInfo que genera el marcado HTML de acuerdo con la tarea. Aquí está el código completo de la solución.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )

Observe que la construcción devuelta desde MyInfo está encerrada entre paréntesis y que los elementos que se mostrarán están dentro del elemento auxiliar <div> .

Resumen

En este artículo, presentamos los componentes funcionales de React. La próxima vez hablaremos sobre los archivos componentes y la estructura de los proyectos React.

Estimados lectores! Si toma este curso, cuéntenos sobre el entorno en el que realiza los ejercicios.