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
620
Programação Funcional com ES6
matheusml
0
570
Other Decks in Programming
See All in Programming
CSC305 Lecture 04
javiergs
PRO
0
270
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
XP, Testing and ninja testing ZOZ5
m_seki
3
670
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
Devoxx BE - Local Development in the AI Era
kdubois
0
130
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
430
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cult of Friendly URLs
andyhume
79
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How to Ace a Technical Interview
jacobian
280
24k
BBQ
matthewcrist
89
9.8k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
RailsConf 2023
tenderlove
30
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to train your dragon (web standard)
notwaldorf
97
6.3k
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