Tutorial React Parte 3: Archivos de componentes, estructura del proyecto

En este artículo, hablaremos sobre los archivos componentes y la estructura de los proyectos React.



→ 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 8. Archivos de componentes, estructura de proyectos React

→ Original

Archivos componentes

Si suponemos que realizó la tarea de la lección práctica anterior utilizando el proyecto estándar creado por create-react-app , ahora utiliza el archivo index.html de la carpeta public , cuyo contenido nos conviene, y el archivo index.js de la carpeta src , en el que escribimos el código. En particular, index.js ahora se ve así:

 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") ) 

Tenga en cuenta que el código del componente funcional MyInfo está contenido en este archivo. Como recordará, React le permite crear muchos componentes, este es uno de sus puntos fuertes. Está claro que colocar el código de una gran cantidad de componentes en un archivo, aunque técnicamente sea factible, en la práctica significa un gran inconveniente. Por lo tanto, el código de los componentes, incluso los pequeños, generalmente se organiza en archivos separados. Es este enfoque el que se recomienda seguir al desarrollar aplicaciones React.

Los archivos de componentes reciben nombres correspondientes a los nombres de los componentes cuyo código almacenan estos archivos. Colóquelos, en el caso de create-react-app , en la misma carpeta src donde se encuentra el archivo index.js . Con este enfoque, el archivo con el componente MyInfo se llamará MyInfo.js .

Cree un archivo MyInfo.js y transfiera el código del componente MyInfo a él, eliminándolo de index.js .

En esta etapa, index.js se verá así:

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

MyInfo.js código MyInfo.js será así:

 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>   ) } 

Así es como se ve todo en VSCode.


Transferir código de componente a un nuevo archivo

Transferimos el código del componente de index.js , pero la estructura que tenemos ahora todavía no funciona.

Primero, recuerde para qué sirve el comando import React from "react" en index.js , aunque no accedemos a React directamente aquí. La razón de esto es que sin la importación React , los mecanismos de esta biblioteca, en particular, JSX, no funcionarán. Gracias a este comando de importación, pudimos, en clases anteriores, pasar el código JSX al método ReactDOM.render() y generar el marcado HTML creado sobre la base de la página. Todo esto significa que en el archivo MyInfo.js también necesitamos importar React. Esta es una práctica común para los archivos de componentes.

En segundo lugar, debemos asegurarnos de que la función MyInfo.js archivo MyInfo.js pueda usarse en otros archivos de aplicación. Necesita ser exportado para esto. Aquí se utilizan las capacidades del estándar ES6. Como resultado, el código actualizado MyInfo.js toma la siguiente forma:

 import React from "react" 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>   ) } export default MyInfo 

Ahora index.js en el archivo index.js . Es decir, necesitamos que el componente MyInfo esté disponible en este archivo. Puede hacerlo disponible en index.js importándolo.

¿Qué sucede si intento escribir un comando de importación de componentes basado en los react importación react y react-dom en index.js ? Por ejemplo, agregue el siguiente comando de importación al archivo:

 import MyInfo from "MyInfo.js" //  

El sistema, habiendo visto dicho comando, en particular, confiando en el hecho de que no contiene información sobre la ruta relativa al archivo, buscará la dependencia del proyecto, el módulo con el nombre especificado cuando se llamó a este comando (así es cómo instalar dependencias en proyectos creados usando create-react-app ; estas dependencias se pueden importar a los proyectos React de la misma manera que se importó la biblioteca React). Ella no encontrará dicho módulo, como resultado, el comando de importación no funcionará. Por lo tanto, el comando de importación de archivos debe reescribirse con la ruta a él. En este caso, estamos satisfechos con la indicación del directorio actual ( ./ ) y el comando de importación tomará la siguiente forma:

 import MyInfo from "./MyInfo.js" //  

Además, si hablamos del comando de import , es importante tener en cuenta que implica que los archivos JavaScript se importan con su ayuda. Es decir, la extensión .js se puede eliminar por completo, y el comando de import , al haber adquirido el formulario que se muestra a continuación, no perderá su funcionalidad.

 import MyInfo from "./MyInfo" //  

Por lo general, estos comandos de importación de archivos JS se escriben de esta manera.

Aquí está el index.js completo del archivo index.js .

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

▍ Estructura del proyecto

Con el crecimiento en tamaño y complejidad de los proyectos React, es muy importante mantener su estructura en buenas condiciones. En nuestro caso, aunque nuestro proyecto ahora es pequeño, es posible, en la carpeta src , crear la carpeta de components , diseñada para almacenar archivos con código de componente.

Cree dicha carpeta y mueva el archivo MyInfo.js a ella. Después de eso, deberá editar el comando de importación de este archivo en index.js .

Es decir, ahora la ruta a MyInfo.js indica que este archivo se encuentra en el mismo lugar que index.js , pero de hecho este archivo ahora se encuentra en la carpeta de components ubicada en la misma carpeta que index.js . Como resultado, la ruta relativa a ella en index.js se verá así: ./components/MyInfo . Aquí está el código index.js actualizado:

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

Y así es como se ve todo en VSCode.


Una carpeta para almacenar componentes e importar un componente de esta carpeta a VSCode

De hecho, una carpeta de components , diseñada para alojar código para todos los componentes, es un ejemplo de una estructura de proyecto extremadamente simplificada. En proyectos reales, para garantizar la conveniencia de trabajar con una gran cantidad de entidades, se utilizan estructuras de carpetas mucho más complejas. Cuáles serán exactamente estas estructuras dependerá de las necesidades del proyecto y de las preferencias personales del programador.

Se recomienda experimentar con todo lo que aprendió hoy. Por ejemplo, puede intentar mover el archivo MyInfo.js a alguna carpeta y ver qué MyInfo.js , puede intentar cambiarle el nombre y cambiar algo de código. Cuando durante el curso de tales experimentos se interrumpa el funcionamiento correcto del proyecto, será útil comprender el problema y volver a poner el proyecto en condiciones de funcionamiento.

Resumen

En esta lección, hablamos sobre formatear el código del componente como archivos separados, exportar e importar código usando ES6 y la estructura de los proyectos React. La próxima vez continuaremos familiarizándonos con las capacidades de los componentes.

Estimados lectores! Pedimos a los desarrolladores experimentados de React que compartan ideas con los recién llegados con respecto a la organización de la estructura del proyecto.