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
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
320
CSC305 Lecture 10
javiergs
PRO
0
180
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
iOSでSVG画像を扱う
kishikawakatsumi
0
140
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
600
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
190
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
2
4.7k
チームの境界をブチ抜いていけ
tokai235
0
200
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why Our Code Smells
bkeepers
PRO
340
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Facilitating Awesome Meetings
lara
56
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Bash Introduction
62gerente
615
210k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
4 Signs Your Business is Dying
shpigford
185
22k
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