In this video, Emmanuel Henri demonstrates the different ways to organize your folder structure to plan for a growing app. He shows you the organization by file type and by feature type.
- [Instructor] The first step towards supporting your growing application is to properly organize your project so you don't have to refactor too much later on. Planning ahead for this will save you tons of work. The first step is to organize your folder structure, and you can do it in two ways, by types of files or features. They both have their benefits and it all depends on your style of programming, or the standards within your enterprise. The first approach structures your files by the types of files, and then combines them all into a contextual folder.
For example, the folder components would have all the components and the folder actions has all the action files. This is how our example project is currently organized. The second approach structures your files by functions or features. For example, if you had a CRM application you'd have a contact list folder, then inside of it you'd have the components, actions, reducers, containers, et cetera. When organizing your components, make sure you separate them by context, and keep the state as high as possible in that context.
Also make sure to include all your app files inside the source folder. And use containers as your point of entry for the state, properly connecting to it. So armed with these options, you should have a solid understanding of how to organize your projects.
- Working with the Electrode and Electrify libraries
- React project organization
- State management with redux-saga
- Testing with Jest, Mocha, and Chai
- Continuous integration with Travis CI
- SSR and caching optimization