Introdução de React.js

1. React.js
Construindo aplicações reativas em JavaScript

2. Quem sou eu?
Henrique Soares
Programador desde 2009 (antes era PHP e não conta
:D)
Instituto Atlântico desde 2012
Entusiasta de JavaScript
BrazilJS 2011
JSConfBR 2013 e 2014
Comunidade CEJS (eventos, hackatons, etc)

3. Como começou o JavaScript
JavaScript was created in 10 days in May 1995 by
Brendan Eich (Netscape)
https://en.wikipedia.org/wiki/JavaScript#History

4. var person = prompt("Please enter your name");
if (person != null) {
document.write("Hello " + person + "!");
}

6. Coisas Da vida
1995 Netscape cria o JavaScript
1996 ECMA padroniza
1997 ES1
1998 ES2
1999 ES3 ­ regex, try/catch
2005
Jesse James Garrett cunhou o termo Ajax (Prototype,
jQuery, Dojo and Mootools)
2008 ES4 (abandonado)
2009 ES5 ­ strict, JSON, Reflect
2015 ES6 ­ class, arrows
2016 ES7 / ES2016 ­ exponentiation operator (**)
2017 ES2017 ­ async/await

7. Templates
EJS, Jade, Mustache.js, Microtemplating etc
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}

8. Sobre o uso de templates
Vantagens Problemas
Mudanças dinâmicas no
HTML
Acoplamento
Interage com objetos e
varáveis JS de view
Pode ficar difícil manter
Renderização no client­
side
Delay de renderização (compilação
em runtime)
Reuso
Renderiza mas a página ainda é
"burra" – não tem binds
Reuso (sim, reuso) – pré­
carregamento = mais uma requisição

9. jQuery e DOM
Seletores, Eventos, Binds e Callbacks
$("input[name=age]").on("change", function() {
if ($(this).val() > 15) {
console.log("Velhote");
}
});
$("form").submit(function() {
$.post("/users", $("form").serialize());
return false;
});

10. Sobre o uso de jQuery e binds
Vantagens Problemas
Separação
JS/HTML
Lidar com seletores e callbacks pode deixar
seu código bagunçado
Plugins
Se o designer alterar o HTML / DOM, o
código quebra
Compatibilidade
multibrowser
Só olhando o código HTML não se sabe os
binds e ações dos elementos
Extensível Baixo reuso e alta acoplação

11. Precisamos de modelos para as views

12. Frameworks
Backbone.js (um dos primeiros, poucos usam hoje)
Knockout.js (Microsoft adotou)
Angular.js (Google)
React.js (Facebook)

13. E o React.js, onde entra?
React components implement a render() method that takes
input data and returns what to display. This example uses an
XML­like syntax called JSX. Input data that is passed into the
component can be accessed by render() via this.props.

14. Na prática...
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(<Timer />, document.getElementById('container'));

15. Virtual DOM
No React, para cada objeto DOM, existe um "objeto DOM virtual"
correspondente. Um objeto DOM virtual é a representação de um
objeto DOM, como uma cópia em memória.
Um objeto DOM virtual tem as mesmas propriedades do DOM real
mas diferenças quando algo é alterado e sua representação na
tela.
Manipular DOM é lento. Manipular o DOM virtual é muito mais
rápido por que não mexe com nada desenhado na tela. Imagine
que manipular um DOM virtual é como editar uma planta baixa ao
invés de mover as salas de uma casa construída.

16. Ciclo de vida dos componentes

17. Muito parecido com qualquer
tecnologia que use componentes

18. Componentes usam componentes
import React, { Component } from 'react';
import {Drawer, List, ListItem, ListItemIcon, ListItemText} from 'material­ui';
import {Inbox as InboxIcon, Drafts as DraftsIcon} from 'material­ui­icons';
export default class SidebarMenu extends Component {
constructor(props) {
super(props);
this.state = {open: false};
}
closeMenu = () => {
this.setState({open: false});
}
render() {
return (
<Drawer open={this.state.open} onRequestClose={this.closeMenu} classes={{paper: classes.menu}}>
<List>
<Link to='/home' onClick={this.closeMenu}>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary='Home' />
</ListItem>
</Link>
<Link to='/about' onClick={this.closeMenu}>
<ListItem button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary='About' />
</ListItem>
</Link>
</List>
</Drawer>
);
}
}

20. Comunicação entre componentes

21. Props
Props são a maneira mais simples de transferir informações entre
os componentes. Com props você pode enviar dados do pai para o
filho.
Props são uma feature central do React.
<MeuComponente propriedadeQueDefini="Valor dado" />
class MeuComponente extends Component {
render() {
return (
<div>{this.props.propriedadeQueDefini}</div>
);
}
}

22. Métodos de instância
Métodos de instância no componente filho podem ser chamados
pelo pai usando refs.
class TheChild extends React.Component {
myFunc() {
return 'hello';
}
}
class TheParent extends React.Component {
render() {
return (
<TheChild ref={(foo) => { this.foo = foo; }} />
);
}
componentDidMount() {
var x = this.foo.myFunc();
// x is now 'hello'
}
}

23. Outras maneiras
https://www.andrewhfarmer.com/component­communication/
Dependendo da complexidade / tamanho da aplicação, é
necessário alguma estratégia de gerir essa comunicação entre os
componentes, e fazer com que um ou mais componente reaja a
uma ação de outro.
Nesse cenário o mais recomendado ­ e comum na comunidade ­ é
utilizar o Flux (pattern criado pelo Facebook), mais propriamente a
sua implementação Redux.

24. ...mas não iremos abordar isso hoje.

25. Criando uma aplicação do zero
a.k.a deixa de blá blá blá e me mostre o código

26. (Colazinha básica)
npm install ­g create­react­app
create­react­app my­app
https://github.com/henriquegogo/react­start

27. Ecossistema React.js
Redux (Implementação do pattern Flux)
react­router
material­ui
Webpack

28. Perguntas?