Transferir como PDF, PPTX
Começando com React.js
- 1. Começando com React.js JoãoPedro Benedetti Misturini
- 2. Antes de iniciarmos ●Resultado de estudos e projetos próprios feitos nos últimos meses. ● Objetivo de demonstrar o básico da biblioteca para outros desenvolvedores.
- 3. Porque isso existe? ●Criado por Jordan Walke, para resolver problemas na criação de interfaces do Facebook/Instagram. ● Manter o DOM atualizado de acordo com o estado dos dados gerava muito esforço.
- 4. O que éReact.js ● É uma biblioteca para a construção de interfaces. ● Diferente de frameworks como o Angular, não determina uma arquitetura para a aplicação. ● Apresenta vantagens de desempenho, devido ao Virtual DOM.
- 5.
- 6. Evoluções no Javascript ●Atualizações ao Javascript (ES2015, ES2016, ES2017…) trouxeram novas funções importantes. ● “Orientação” a “objetos”, arrow functions, entre outros.
- 7. Entendendo componentes ● Umcomponente básico é uma classe que extende a classe Component, da biblioteca. ● Sempre deve implementar o método render(), onde é definida a exibição do componente. ● Todo componente recebe props - dados de entrada - na sua construção.
- 8.
- 9. JSX ● “Açúcar sintáticopara React.createElement()”. ● É XML compilado, não HTML. ● Integra HTML com os próprios componentes.
- 10. Estado e métodos ●Cada componente pode ter seu próprio estado e métodos. ● A renderização do componente é atualizada na alteração do estado.
- 11. Fluxo de propriedadespara filhos ● Componente pode passar seu estado e métodos para outros componentes internos. ● Os componentes internos recebem os dados através de “props”.
- 12. Fluxo de propriedadespara filhos ● Componente pode passar seu estado e métodos para outros componentes internos. ● Os componentes internos recebem os dados através de “props”.
- 13.
- 14. Resumindo... ● Componentes sãoclasses Javascript que herdam Component. ● Devem implementar o render(), onde o JSX deve pode ser usado. ● Todo componente recebe props, que podem ser usados para renderização. ● Todo componente pode ter estado e métodos próprios, que influenciam na renderização.
- 15. Mas como eucomeço?
- 16. Criando um projeto ●Create React App: https://github.com/facebook/create-react-app ○ Requisito: Node.js, NPM ○ Recomendável: Yarn ● Cria um projeto com React.js do zero, com servidor de desenvolvimento e geração de builds. ● Não exige mais nenhuma configuração.
- 17. Muito obrigado! ● Linkdo repositório: https://github.com/joaomisturini/meetup-gdi ● E-mail: joao.benedetti.misturini@gmail.com ● Telegram: @joaomisturini ● Ou no grupo do Whatsapp