Order the Chaos: How to organize your react code

5 simple sample about how I organize my react code that may help you to improve your DX (Developer Experience) while your project scale

Transcript

1. Moving things around Matheus Monte - 2020 A personal view/experience on react projects
2. Who Am I? • Software engineer on Amazon Web Services (AWS) • Former Samsung and some startups. • Open source and community lover • Current Dubliner , but World Citizen • Travel, Live, Code and Repeat Matheus Monte
3. Before Start, some details. - React is a Lib and not a framework. - It’s focused on V from MVC. - It’s flexibly to all uses
4. React Project Journey Create-react-app my-new-wonder-project
5. 1 file App.js is describing all application on this moment
6. - Internet "Move the things around until looks right”
7. - Me But How?
8. Let’s try to order the chaos
9. • Move things in one direction • Create a timeline to envolve your code based on your project needs • You can choose a partner that fit in your team, this is just some “templates"
10. Phase 1 • Still simple • Better to divide your code on section • On this context, component means visual and logic implementation (Data get, render and specific behaviour) • I can recommend this to PoC or small one-page websites Separate your components on diferente files
11. Phase 2 • Once you get more files, you need to adequate your code structure • Create folder on the same domain that phase 1. • On this approach, you have more code separated by file together on same domain • Recommended to small projects with some data to handle. Separate your components on diferente files
12. Phase 3 • Start separate your components, hooks, services, context by a high level folder structure • You have a better control on project parts and you can reuse better your code • Middle and High complex projects can scalable well on this structure Create Type Folders
13. Phase 4 • Sometimes you have more than one view for same operation • You can create domains to separate and avoid unnecessary conflicts • You can add this to any another high level type folder Domains on Containers
14. - Me This is just a suggestion
15. Get in touch Twitter: @mcsmonte Email: matheusmonte@protonmail.com