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
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Team operations that are not burdened by SRE
kazatohiei
1
310
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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