Introdução ao React (Simplificado)

Transcript

1. Introdução ao React Gabriel Sobrinho
2. React • Biblioteca para construir interfaces de usuário • Implementa apenas a camada de apresentação • Trabalha com Virtual DOM para ser performático • Fluxo de dados em direção única • Desenvolvido e mantido pelo Facebook/Instagram
3. GABRIEL SOBRINHO gabrielsobrinho.com github.com/sobrinho twitter.com/sobrinho speakerdeck.com/sobrinho
4. hite.com.br
5. Conceitos
7. JSX
8. JSX • Transpiler de XML para JavaScript • Uso opcional porém recomendado • Adiciona alguns recursos como o spread operator
9. JSX • Elimina a necessidade de conhecer a API da biblioteca Virtual DOM utilizada pelo React • Facilita a manutenção dos componentes por desenvolvedores casuais
10. JSX render: function () { return ( <a href="http://www.hite.com.br"> www.hite.com.br </a> ); }
11. JSX render: function () { return React.createElement( "a", { href: "http://www.hite.com.br/" }, "Hite" ); }
13. Componentes • React se resume basicamente apenas a construir componentes • Não possui opinião sobre como a arquitetura da sua aplicação deve ser feita • Componentes são bem definidos, previsíveis, encapsulados, testáveis e re-usáveis
14. Componentes var Facebook = React.createClass({ render: function() { var href = 'https://www.facebook.com/' + this.props.username; return ( <a href={href}> {this.props.username} </a> ); } });
16. Props • Armazena os argumentos externos do componente • React possui uma interface para validar os dados recebidos como tipo, obrigatoriedade e etc • Excelente para documentar o componente
17. Props var Gravatar = React.createClass({ render: function() { var url = gravatar(this.props.email); return ( <img alt={this.props.name} src={url} /> ); } });
18. Props var Gravatar = React.createClass({ propTypes: { name: React.PropTypes.string, email: React.PropTypes.string.isRequired }, render: function() { var url = gravatar(this.props.email); return ( <img alt={this.props.name} src={url} /> ); } });
20. State • Armazena o estado interno do componente • O componente é automaticamente atualizado quando o state sofre alguma alteração • Seu uso deve ser evitado sempre que possível porque introduz incertezas quanto ao estado
21. State var Clock = React.createClass({ componentDidMount: function() { setInterval(this.tick, 1000); }, tick: function() { this.setState({clock: new Date}); }, render: function() { return <p>{this.state.clock}</p>; } });
23. Bônus • Hooks: funções que são chamadas em momentos específicos da vida do componente • Mixins: reuso de código entre componentes • Flux: sugestão de arquitetura bastante similar ao MVC original
24. Flux
26. Dicas
27. Comece com componentes puros
28. Se necessário use estado no componente
29. Se necessário extraia o estado do componente
30. Se necessário utilize o Falcor, Relay ou similares
32. Obrigado!
33. Dúvidas?
34. Referências • https://facebook.github.io/react/index.html • https://facebook.github.io/flux/ • http://blog.andrewray.me/reactjs-for-stupid-people/ • http://blog.andrewray.me/flux-for-stupid-people/