React - Criando Interfaces com JavaScript

Talk do Meetup de React.Js do Facebook Developer Circle

Transcript

1. C O N S T R U I N D O I N T E R F A C E S C O M J A V A S C R I P T D É B O R A D U A R T E
2. quem sou eu Sou formada no Técnico em Informática pelo IFSUL Campus Charqueadas, faço Publicidade e Propaganda na Unisinos. Sou certificada como Adwords Specialist. Trabalho como Head de Mídia na Noize e Mídia Freelancer na CRZ Branding
3. o que veremos: o que é React.js? estrutura de components princípio de responsabilidade única esse tal de virtual dom porque usar? state props lifecyvle # # # # # # # #
4. o que é React.js? React.js é uma biblioteca (lib) JavaScripit para o desenvolvimento de interfaces.
5. estrutura de components Components são a base do React.js. Eles são elementos cutumizados baseados no princípio de responsabilidade única (veremos a seguir).
6. estrutura de components Exemplo:
7. princípio de responsabilidade única Esse conceito vem do SOLID, que são uma série de princípios de Design de Software. Ele basicamente diz que uma classe deve fazer uma única coisa. Se a classe tiver mais de uma responsabilidade devemos direcionar uma das responsabilidades para uma nova classe.
8. princípio de responsabilidade única Exemplo: Clientes getInfoClient(); saveInfoClient(); Clientes getInfoClient(); ClientesBD saveInfoClient();
9. princípio de responsabilidade única Com componets no React.js usamos a mesma lógica Cada component deve ter uma única função.
10. princípio de responsabilidade única Exemplo:
11. esse tal de virtual dom Manipular DOM se torna um problema de performance, pois a cada mudança em qualquer elemento, ele renderiza todo o DOM e isso o torna muito lento.
12. esse tal de virtual dom Com React isso funciona de uma maneira diferente e mais performática. A cada component inicializado, o método Render é chamado e gera uma representação da view e "resolve" tudo nessa representação antes de enviar para o DOM. Ele compara a representação da view com o DOM e atualiza no DOM apenas o que mudou.
13. esse tal de virtual dom Exemplo: Virtual Dom antes Dom Real depois Dom Real antes <h1> Antes </h1> Patch set <h1> Depois </h1> Virtual Dom depois Diff Aplica <h1> Depois </h1> <h1> Antes </h1> <h1> Depois </h1>
14. props São atributos que podemos adicionar aos nossos components. Servem para renderizar dados dinâmicos e estão disponíveis no render() através do this.props
15. state É parecido com props, pois serve para renderizar elementos dinamicamente, porém com a diferença de ser controlado internamente pelo component enquanto props servem para renderizar elementos externos.
16. lifecycle São ciclos de vida do components dentro da renderização.
17. lifecycle Exemplo: componentDidMount componentWillMount shouldComponentUpdate componentWillUnmount quando desmontamos o component quando o estado ou props estão sendo definidos depois da renderização antes da renderização
18. POR QUE USAR? vantagens e desvantagens
19. vantagens Incentiva a Modularização do código; Ganho de performance e diminuição do tempo de atualização da página com o Vitual DOM; É mantido pelo Facebook; Tem uma comunidade grande; É possível desenvolver quase tudo com React, incluindo Apps nativos, com o React Native.
20. desvantagens Costuma ser um pouco verboso e para iniciantes o fluxo de components pode ser confuso; Se não for bem pensado e planejado, o fluxo de dados, provavelmente teremos que fazer a famosa "gambiarra" para passar dados de um lugar para outro.
21. Obrigada! @deboracardu