Piero Divasto
Full-stack developer
React
Como estructurar proyectos
Piero Divasto
Full-stack Developer
Aprendiendo React
Llegó el momento...
Como estructuro mi proyecto?
División por concepto
División por vistas
División por componentes
División por concepto
├── actions
│ ├── comment.actions.js
│ └── post.actions.js
├── components
│ ├── App.js
│ ├── Comment.js
│ ├── Comments.js
│ └── Post.js
├── constants
│ ├── comment.types.js
│ └── post.types.js
├── css
│ └── index.css
├── index.js
├── reducers
│ ├── comment.reducer.js
│ └── post.reducer.js
└── router
└── router.jsDivisión por vistas
├── actions
│ ├── comment.actions.js
│ └── post.actions.js
├── components
│ ├── App.js
│ ├── Comment.js
│ ├── Comments.js
│ └── Posts.js
├── constants
│ ├── comment.types.js
│ └── post.types.js
├── views
│ ├── home
│ | ├── Home.js
│ ├── posts
│ | ├── Posts.js
│ ├── about
│ | └── ...
├── css
│ └── index.css
├── index.js
├── reducers
│ ├── comment.reducer.js
│ └── post.reducer.js
└── router
└── router.jsDivisión por componentes
├── components
│ ├── comment
│ | ├── Comment.js
│ | ├── comment.css
│ | └── Comment.spec.js
│ ├── comments
│ | ├── Comments.js
│ | ├── comments.css
│ | └── Comments.spec.js
│ ├── post
│ | ├── Post.js
│ | ├── post.css
│ | └── Post.spec.js
├── views
│ ├── home
│ | ├── Home.js
│ | ├── home.css
│ | └── Home.spec.js
│ ├── posts
│ | ├── Posts.js
│ | ├── posts.css
│ | └── Posts.spec.js
│ ├── about
│ | └── ...
├── index.js
└── ...Otras formas
División por dominio
├── App
│ ├── Header.js
│ ├── Sidebar.js
│ ├── App.js
│ └── ...
├── Facturacion
│ ├── Facturacion.js
│ ├── facturacion.actions.js
│ ├── facturacion.reducer.js
│ └── ...
├── Pagos
│ ├── Pagos.js
│ ├── pagos.actions.js
│ ├── pagos.reducer.js
│ └── ...
└── ...Y los tests?
├── components
│ ├── comment
│ | ├── ...
│ | └── Comment.spec.js
│ ├── comments
│ | ├── ...
│ | └── Comments.spec.js
│ ├── post
│ | ├── ...
│ | └── Post.spec.js
├── views
│ ├── home
│ | ├── ...
│ | └── Home.spec.js
│ ├── posts
│ | ├── ...
│ | └── Posts.spec.js
│ ├── about
│ | └── ...
├── index.js
└── ...├── src
| ├── components
| │ ├── comment
| │ | ├── Comment.js
| │ ├── comments
| │ | ├── Comments.js
| │ ├── post
| │ | ├── Post.js
| ├── views
| │ ├── home
| │ | ├── Home.js
| │ ├── posts
| │ | ├── Posts.js
| │ ├── about
| │ | └── ...
| ├── index.js
| └── ...
├── __tests__
| ├── components
| │ ├── comment
| │ | ├── Comment.spec.js
| │ ├── comments
| │ | ├── Comments.spec.js
| │ ├── post
| │ | ├── Post.spec.js
└── ...Y los demás, como lo hacen?
Y los demás, como lo hacen?
https://www.reddit.com/r/reactjs/comments/6al7h2/facebook_has_30000_react_components_how_do_you/
Conclusiones
No hay una silver bullet
La estructura depende de cada proyecto
El equipo debería decidir cual es mejor
No gastar demasiado tiempo en elegir una forma de estructura
Muchas gracias!
http://github.com/morph3o
https://medium.com/@pierodivasto
https://www.linkedin.com/in/pierodivasto
Como estructurar proyectos React
By Piero Divasto
Como estructurar proyectos React
Presentación sobre las distintas formas de estructurar un proyecto en React
