Estructura de archivos en aplicaciones de React.js

File-Type First (FTF)

/-app
  /-styles
    /-Form.css
  /-components
    /-CommentAuthor.jsx
    /-CommentForm.jsx
    /-CommentList.jsx
  /-containers
    /-Comment.jsx
  /-records
    /-comment.js
  /-utils
    /-api.js
  /-index.js
  1. Fácil de organizar inicialmente
  2. No hay dudas sobre donde colocar cada archivo
  3. Archivos que importan otros del mismo tipo solo tienen que buscar en su propia carpeta.
  4. Si usas un sistema de carga automática se vuelve más fácil de esta forma.

Ventajas

Feature First (Pods)

/-app
  /-comment
    /-components
      /-Author.jsx
      /-Form.jsx
      /-List.jsx
      /-Star.jsx
    /-containers
      /-App.jsx
      /-Comment.jsx
    /-utils
    /-records.js
    /-api.js
    /-Container.jsx
    /-index.js
  /-shared
    /-components
    /-utils
    /-api.js
  /-routes.js
  /-index.js
  1. Es fácil nombrar features
  2. Independiente de frameworks, cada feature podría usar internamente su propia organización dependiendo del framework o librería usada
  3. El punto de entrada es obvio para cada feature y para la aplicación
  4. Hacer code-splitting es trivial

Ventajas

Apps of Apps

/-drive
  /-docs
    /-toolbar
      /-containers
      /-components
      /-records
      /-api.js
      /-index.js
    /-preview
      /-containers
      /-components
      /-records
      /-api.js
      /-index.js
  /-sheets
    /-toolbar
      /-containers
      /-components
      /-records
      /-api.js
      /-index.js
    /-sheet
      /-containers
      /-components
      /-records
      /-api.js
      /-index.js
  1. Es fácil cargar cada aplicación de forma individual
  2. Internamente cada aplicación puede usar FTF o pods
  3. Cada aplicación puede tener su propio framework o librerías

Ventajas

Estructura de archivos en aplicaciones de React.js

By Sergio Xalambrí

Made with Slides.com

Estructura de archivos en aplicaciones de React.js

Explicación de varias formas de organizar archivos en aplicaciones de React.js

  • 2,838

More from Sergio Xalambrí