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
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
AIともっと楽するE2Eテスト
myohei
6
2.6k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf 2023
tenderlove
30
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Side Projects
sachag
455
42k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Become a Pro
speakerdeck
PRO
29
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Six Lessons from altMBA
skipperchong
28
3.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Unsuck your backbone
ammeep
671
58k
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