JuanchiToronto retweetledi
Cómo estructurar tu código de frontend en React.js
[Esta es una de varias formas de estructurar. ¿Cuál usas tú?]
📁
├── 📄 index.js
├── 📁 public
│ ├── 📄 index.html
│ ├── 📁 images
│ └── ...
├── 📁 src
│ ├── 📄 App.js
│ ├── 📁 components
│ │ ├── 📄 Header.js
│ │ ├── 📄 Footer.js
│ │ └── ...
│ ├── 📁 pages
│ │ ├── 📄 Home.js
│ │ ├── 📄 About.js
│ │ └── ...
│ ├── 📁 styles
│ │ ├── 📄 App.css
│ │ ├── 📄 Home.css
│ │ └── ...
│ ├── 📁 tests
│ │ ├── 📁 component
│ │ ├── 📁 pages
│ │ └── ...
│ ├── 📁 utils
│ │ ├── 📄 helpers.js
│ │ └── ...
│ └── 📄 serviceWorker.js
├── 📁 node_modules
└── 📄 package.json
Aquí te damos una breve explicación:
index.js
Es como el centro de control de tu aplicación web. Es donde configurar y gestionar todo.
public
Piensa en esto como tu almacén para cosas que todos pueden ver, como imágenes. Especificamente, index.html es la única página html que se presenta al navegador en una aplicación de React.
src
Esto se considera la carpeta principal que contiene todos los códigos fuente de la aplicación React.js.
App.js
Es el componente principal de React que actúa como el contenedor para el resto de la aplicación.
components
Aquí es donde colocas los diferentes componentes que componen tu sitio web. Cada archivo aquí representa un componente que puede usarse en una o varias páginas.
pages
Estos son como las distintas secciones de tu sitio web. Cada archivo en esta carpeta normalmente representaría una ruta distinta en tu aplicación web React.
styles
Aquí es donde estarían todos tus archivos CSS. Cada archivo aquí se usa para estilizar un componente o una página específica.
tests
Estos son como exams para tu sitio web para asegurarte de que funcione correctamente. Creas diferentes tipos de pruebas para verificar diferentes partes de tu sitio.
utils
Estos son herramientas útiles que usas para mejorar tu sitio web, como funciones de utilidad generales.
node_modules
Esta es como tu caja de herramientas llena de herramientas (bibliotecas y códigos) que usas para construir tu sitio web. Es llenada automáticamente con cosas que tu proyecto necesita.
package.json
Es un archivo que contiene metadata sobre tu proyecto, como las dependencias del proyecto.
Esta estructura te ayuda a construir y gestionar tu sitio web de una manera ordenada, haciéndolo más fácil de entender y trabajar, especialmente cuando tu proyecto se hace más grande y más complejo y tienes que hacer cambios muy a menudo.
#LoAprendíEnPlatzi
Español
