Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Organizando aplicações com React
Search
Matheus Lima
November 22, 2016
Programming
0
82
Organizando aplicações com React
Como organizar, de forma escalável, aplicações com React.
Matheus Lima
November 22, 2016
Tweet
Share
More Decks by Matheus Lima
See All by Matheus Lima
JavaScript e Blockchain, onde eles se encontram
matheusml
5
1.1k
Qual é a dos Progressive Web Apps?
matheusml
1
86
Elm: Front-End do Jeito Certo
matheusml
2
600
O verdadeiro porquê da Programação Funcional
matheusml
1
610
Programação Funcional com ES6
matheusml
0
560
Other Decks in Programming
See All in Programming
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
240
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
Hack Claude Code with Claude Code
choplin
7
2.5k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Featured
See All Featured
Bash Introduction
62gerente
613
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Code Reviewing Like a Champion
maltzj
524
40k
Why Our Code Smells
bkeepers
PRO
337
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Embracing the Ebb and Flow
colly
86
4.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
Organizando aplicações em React Matheus Lima @matheusml
Tópicos • Componentização • Organização dos arquivos • Styles
Componentização
jQuery <div> <button id="button">Click me</button> </div>
jQuery #button { background-color: blue; border: none; color: white; padding:
5px 10px; }
jQuery $("#button").bind("click", function() { alert("Clicked"); });
Três arquivos ligados logicamente, mas separados fisicamente.
React const Main = () => ( <button onClick={() =>
alert('Clicked')} style={{backgroundColor: 'blue', color: white, padding: '5px'}} >Click me</button> );
Tudo que é ligado logicamente também é ligado fisicamente.
Vantagens • Alterar o código sem preocupação
Vantagens • Alterar o código sem preocupação • Bugs mais
fáceis de rastrear
Vantagens • Alterar o código sem preocupação • Bugs mais
fáceis de rastrear • Deletar a feature, tudo é removido também
Organização dos arquivos
O que é Escalabilidade?
É o quanto sua aplicação pode crescer.
No Front-End, é conseguir mudar o código com o mínimo
de falhas.
Organização de pastas por features é o caminho.
Organização de pastas src/ assets/ components/ services/
Organização de pastas src/ assets/ (fonts, images) components/ services/
Organização de pastas src/ assets/ (fonts, images) components/ services/ (utils,
shared)
Organização de pastas components/ home/ Home.js Home.spec.js styles.css login/ sidebar/
O Componente está na mesma pasta de seu style e
do seu test.
Styles
Qual o problema do CSS?
Tudo é global.
None
Todas as vantagens do CSS, sem a principal desvantagem.
CSS Modules .button { background-color: blue; border: none; color: white;
padding: 5px 10px; }
CSS Modules import styles from './styles.css'; const Main = ()
=> ( <button onClick={() => alert('Clicked')} className={styles.button} >Click me</button> );
O css vale somente para quem você definir.
Resumo
Componentização: Deixar tudo que é ligado entre si próximo fisicamente
Organização dos arquivos: Componente, teste e styles na mesma pasta
Styles: CSS Modules para resolver o problema do css global
@matheusml
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