Organizando aplicações com React

Como organizar, de forma escalável, aplicações com React.

Transcript

1. Organizando aplicações em React Matheus Lima @matheusml
2. Tópicos • Componentização • Organização dos arquivos • Styles
3. Componentização
4. jQuery <div> <button id="button">Click me</button> </div>
5. jQuery #button { background-color: blue; border: none; color: white; padding: 5px 10px; }
6. jQuery $("#button").bind("click", function() { alert("Clicked"); });
7. Três arquivos ligados logicamente, mas separados fisicamente.
8. React const Main = () => ( <button onClick={() => alert('Clicked')} style={{backgroundColor: 'blue', color: white, padding: '5px'}} >Click me</button> );
9. Tudo que é ligado logicamente também é ligado fisicamente.
10. Vantagens • Alterar o código sem preocupação
11. Vantagens • Alterar o código sem preocupação • Bugs mais fáceis de rastrear
12. Vantagens • Alterar o código sem preocupação • Bugs mais fáceis de rastrear • Deletar a feature, tudo é removido também
13. Organização dos arquivos
14. O que é Escalabilidade?
15. É o quanto sua aplicação pode crescer.
16. No Front-End, é conseguir mudar o código com o mínimo de falhas.
17. Organização de pastas por features é o caminho.
18. Organização de pastas src/ assets/ components/ services/
19. Organização de pastas src/ assets/ (fonts, images) components/ services/
20. Organização de pastas src/ assets/ (fonts, images) components/ services/ (utils, shared)
21. Organização de pastas components/ home/ Home.js Home.spec.js styles.css login/ sidebar/
22. O Componente está na mesma pasta de seu style e do seu test.
23. Styles
24. Qual o problema do CSS?
25. Tudo é global.
27. Todas as vantagens do CSS, sem a principal desvantagem.
28. CSS Modules .button { background-color: blue; border: none; color: white; padding: 5px 10px; }
29. CSS Modules import styles from './styles.css'; const Main = () => ( <button onClick={() => alert('Clicked')} className={styles.button} >Click me</button> );
30. O css vale somente para quem você definir.
31. Resumo
32. Componentização: Deixar tudo que é ligado entre si próximo fisicamente
33. Organização dos arquivos: Componente, teste e styles na mesma pasta
34. Styles: CSS Modules para resolver o problema do css global
35. @matheusml
36. www.concretesolutions.com.br Rio de Janeiro – Rua São José, 90 – cj. 2121 Centro – (21) 2240-2030 São Paulo - Av. Nações Unidas, 11.541 3º andar - Brooklin - (11) 4119-0449 Ajudamos empresas a criar produtos digitais de sucesso