Tutorial React Parte 4: Componentes principales y secundarios

Estamos publicando la siguiente parte de la traducción del curso de capacitación React. Nuestro tema de hoy será la relación entre los componentes principales y secundarios.



→ 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 9. Componentes principales y secundarios

→ Original

Hoy hablaremos sobre los componentes principales y secundarios. El uso de tales construcciones hará que nuestra aplicación sea mucho más compleja que cuando solo tenía una salida de componente en el DOM, como MyInfo . En lugar de esta estructura simple, la aplicación puede tener una jerarquía compleja de componentes, que, como resultado, se convierte en elementos JSX.

Comencemos con la plantilla de aplicación que ya conoce. Para recordar lo que ha index.js , puede, desde la memoria, escribir un código en el archivo index.js vacío para mostrar la página de encabezado de primer nivel con el texto Hello World! Reaccionar herramientas. Así es como se vería el código:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

La última vez, donde la descripción del elemento <h1> está en el código anterior, había un código para mostrar el componente MyInfo . Ahora vamos a crear el componente de la App y mostrarlo. Para hacer esto, necesitamos un código de la siguiente forma:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

El componente de la App será el punto de entrada a nuestra aplicación. Probablemente ya haya notado que faltaba algo en el código del ejemplo anterior. Esto es cierto: todavía no hemos importado la App aquí. Hagámoslo:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Pero ese código sigue sin funcionar. Necesitamos el archivo de componente de la App ( App.js ) ubicado en la misma carpeta que index.js . Este es el archivo al que nos referimos en la import App from "./App" importación de comandos de import App from "./App" . Recuerde que los nombres de los componentes React están escritos en estilo camel y comienzan con una letra mayúscula. Cree el archivo que necesitamos y describa el componente de la App en él. Intenta hacerlo tú mismo. Es decir, escriba el código gracias al cual el componente de la App muestra Hello again en la página.

Así es como se ve este código:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

Aquí la función de App devuelve un solo elemento, pero recuerde que se pueden devolver estructuras más complejas de funciones similares. Lo más importante es no olvidar que solo puede devolver un elemento, que, de hecho, si necesita mostrar varios elementos, es un contenedor que los incluye. Por ejemplo, así es como se vería un retorno de marcado que describe un encabezado de primer nivel y una lista de viñetas:

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

Quizás ahora decidamos que lo que se forma mediante el componente de App debería ser un sitio web. Tendrá un bloque de navegación ( <nav></nav> ) y un área de contenido principal ( <main></main> ). Esta solución conducirá a la formación del siguiente código:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

Así es como se verá en un navegador.


Aplicación en navegador

Aquí todavía puede estilizar la lista para que se parezca más a una barra de navegación.

Puede notar que el código del componente ya se ha vuelto bastante grande. Esto va en contra del propósito para el que usamos React. Anteriormente hablamos sobre el hecho de que los fragmentos de código HTML pueden representarse como componentes separados, y en nuestro componente todo se acumula en un montón. Por lo tanto, ahora crearemos componentes para cada fragmento independiente del marcado.

Eche un vistazo a este diagrama para comprender mejor lo que está en juego.


El componente de aplicación muestra el componente MyInfo, la salida del elemento <div>

Aquí mostramos el componente de la App en la página. En este caso, el componente de la App decide mostrar otro componente: MyInfo . Y el componente MyInfo ya muestra un cierto elemento JSX. Preste atención a la diferencia entre los conceptos de "componente" y "elemento". Los elementos son entidades que se convierten en código HTML normal. Entonces, en el elemento presentado en la parte inferior del diagrama, se usa una etiqueta <div> simple, su nombre comienza con una letra minúscula, que nos dice que este es un elemento ordinario, y no uno de los componentes que creamos. Por otro lado, el nombre MyInfo comienza con una letra mayúscula. Esto ayuda a comprender que tenemos un componente.

Es posible que haya escuchado que el DOM (Modelo de objeto de documento, a menudo denominado "árbol"). El elemento raíz de este árbol es el elemento <html> . En nuestro caso, el elemento raíz del árbol representado en el diagrama es el componente de la App . Las capacidades de este componente no se limitan a la salida de otro componente, MyInfo en nuestro caso. Puede, por ejemplo, mostrar otro componente, que es un "pie de página", la parte inferior de la página. Digamos que este componente se llamará AwesomeFooter .


La aplicación de componentes genera dos componentes

Este componente, a su vez, puede generar un elemento <footer> que contendrá el código HTML en la parte inferior de la página.

Si tenemos un "pie de página" de una página, también puede contener un "encabezado", que forma su parte superior.


Salidas de aplicaciones de componentes Tres componentes

La parte superior de la página está representada en nuestro diagrama por el componente AwesomeHeader . Dichos nombres se dan a estos componentes para no confundirlos con los elementos. El componente AwesomeHeader , como el componente de la App , puede generar no solo el marcado JSX, sino también otros componentes. Por ejemplo, puede ser un componente NavBar , que es una barra de navegación, y un componente Logo que muestra un logotipo. Y estos componentes ya mostrarán elementos ordinarios, como <img /> y <nav> .

A medida que revisa este esquema, puede notar que una aplicación React, a medida que se desarrolla, puede volverse cada vez más compleja. Y lo que examinamos aquí es, de hecho, un ejemplo de una estructura de aplicación extremadamente simple.

Ahora creemos un componente en nuestra aplicación de capacitación que será un "pie de página" de la página.

Para hacer esto, cree, en la misma carpeta que el archivo index.js , un nuevo archivo. Footer.js y pon el siguiente código:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

Tenga en cuenta que el nombre del componente funcional comienza con una letra mayúscula ( Footer ) y el nombre del elemento (<footer> ) comienza con una pequeña. Como ya se mencionó, esto ayuda a distinguir elementos de componentes.

Si ahora actualiza la página, el marcado generado por el componente de Footer no se mostrará en su parte inferior. Esto es completamente esperado, ya que para visualizarlo, debe realizar los cambios apropiados en el código del componente de la App .

Es decir, estamos hablando del hecho de que en el código del archivo del componente de la App debe importar el componente de Footer y crear una instancia del mismo. Edite el código para el archivo App.js :

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

Ahora la página en que se forman los formularios de solicitud se verá como la que se muestra a continuación.


El componente de la aplicación muestra el marcado formado por otro componente en la parte inferior de la página - Pie de página

Puede notar que ahora en el código de salida del componente de la App hay una extraña mezcla de elementos JSX ordinarios con componentes. Sería mucho mejor si lo que muestra el componente de la App es como una tabla de contenido en un libro, de modo que contiene principalmente componentes. A saber, el punto es que el código del componente se vería así:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Si la aplicación tiene una estructura similar (en nuestro caso, dado que los archivos de componentes de Header y MainContent aún no se han creado, el código no funcionará), entonces la descripción de los elementos que forman las diversas partes de la página estará en los archivos de los componentes correspondientes. Al mismo tiempo, los componentes importados en el componente de la App pueden contener otros componentes anidados. Por lo tanto, se pueden formar estructuras bastante extensas, cuyas dimensiones están determinadas por las necesidades de una aplicación particular.

Aquí hablamos sobre cómo trabajar con componentes anidados. En la práctica, puede probar lo que acaba de aprender poniendo en funcionamiento el proyecto, App.js archivo App.js ve como se muestra arriba.

Lección 10. Taller. Componentes primarios y secundarios

→ Original

▍Trabajo

Cree una aplicación React desde cero. Muestre el componente raíz de la App (definido en un archivo separado) en la página. Imprima los siguientes componentes dentro de este componente:

1. Navbar
2. MainContent
3. Footer

Los componentes que muestra la App deben describirse en archivos separados, cada uno de ellos debe mostrar algunos elementos JSX.

▍Solución

Como base para resolver este problema, se utiliza un proyecto estándar creado con las herramientas de create-react-app (si no sabe cómo crear dicho proyecto, eche un vistazo a este material). Utiliza el index.html estándar.

El código para el archivo index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Aquí está el código para el archivo App.js Tenga en cuenta que utilizaremos la carpeta de components para almacenar los archivos de componentes.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

El código para el archivo Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js archivo MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

Código del archivo Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

Puede organizar el trabajo con los componentes que desee. Es decir, puede, por ejemplo, primero escribir todo el código necesario en el archivo App.js que importa los componentes y muestra sus instancias, y luego crear los archivos de componentes. Puede hacer lo contrario: primero cree archivos de componentes con código y luego trabaje en el archivo App.js Lo más importante es que termines con una aplicación que funcione.

Así es como se ve el proyecto en VSCode.


Proyecto en VSCode

Y aquí está la página que formó esta aplicación.


Página de aplicación en el navegador

Nuestra aplicación React funciona, pero lo que muestra en la página parece de alguna manera completamente desinteresado. Puede solucionar esto al diseñar el contenido de la página.

Resumen

Hoy hablamos sobre los componentes principales y secundarios. La próxima vez comenzaremos a trabajar en nuestro primer gran proyecto de capacitación y hablaremos sobre los elementos de estilo de la página.

Estimados lectores! Si participa en este curso, díganos cómo realiza ejercicios prácticos. A saber: ¿escribe el código que se llama "desde la cabeza", o mira el texto de la lección anterior? ¿O tal vez estás tratando de encontrar lo que olvidaste en Internet?