O documento discute como utilizar React JS em aplicações escaláveis. Explica que aplicações escaláveis não significam infraestrutura escalável e apresenta os principais conceitos como componentes, rotas, fluxo de dados e organização de arquivos em diretórios. Também discute o relacionamento entre ações e stores no Flux e como reutilizar código através de um CRUDStore genérico.

1. Utilizando React JS em
aplicações escaláveis
aplicações escaláveis != infraestrutura escalável

2. Gustavo Felizola
Desenvolvedor UI Sr no Mercado Livre
https://github.com/gfelizola
We’re hiring
Entre em contato com:
staffing@mercadolivre.com
Assunto: “Vagas Front-End”

3. webpack (ES6)
index.html
app.jsx
Começando pequeno, Initial Setup
branch passo1

4. Routes
react-router
routes.jsx
Geralmente são o item pai de toda árvore de componentes da aplicação;
Levam para componentes (não levam para “Controllers”).
Main.jsx
Componente pai de toda aplicação.
branch passo2

5. Componentes Dummies
Cada componente
- Possui sua responsabilidade
- Possui suas propriedades
Componentes Dummies são basicamente renders
Propriedades callbacks de eventos
branch passo3

6. Possuem funcionalidades
Fazem chamadas em Actions
Carregam dados de Stores
LifeCycle com mais tratamentos
componentDidMount / componentWillUpdate / componentWillUnmount
Componentes Inteligentes
branch passo4

7. Flux - Relacionamento entre Actions e Stores
Exibir como os dados de Login são enviados e recuperados
branch passo4

8. CrudStore, especialização para
reaproveitamento
menor risco de erros
maior controle sobre a manutenabilidade
CRUD!
branch master

9. Estrutura básica de arquivos/diretórios
build/
src/
actions/
stores/
components/
routes/
utils/
- routes.jsx
- app.js
- index.html

10. obrigado
?