Introdução ao desenvolvimento com React

Transcript

1. Introdução ao desenvolvimento com React Diego Martins de Pinho

2. - Conceitos - Create React App - Aplicação prática -

   Considerações finais Sumário

3. Quem sou eu Nome: Diego Martins de Pinho Idade: 25

   Anos Profissão: Desenvolvedor de Software Realizações legais: 1. Community Manager no iMasters 2. Autor do livro: ECMAScript 6 - Entre de Cabeça no Futuro do JavaScript 3. Fundador da Code Prestige - Escola de programação à distância

4. O que é o React? O React é uma biblioteca

   JavaScript para criação de interfaces de usuário em aplicações web, que foi idealizada pelo time de desenvolvimento do Facebook. • Criada por Jordan Walke, engenheiro do Facebook • Primeiro release: Maio de 2013 na JSConf US • Utilizado por grandes empresas: Facebook, Instagram, Netflix, Sony etc • Tem competido de frente com outros frameworks e bibliotecas consagradas como: Angular, Backbone e Ember • Versão atual: 16

5. Pra que serve? O problema a ser resolvido: Construir grande

   aplicações com dados que mudam com o tempo. Como resolver? • Focar somente na view • Utilizar o Virtual DOM • Trabalhar com Componentes

6. Características As principais são: • Alta Performance - Virtual DOM

   • Baseado em componentes • Apresenta o JSX (sintaxe xml para javascript) • Pode ser executado tanto no navegador quanto no servidor

7. O que construiremos? Uma aplicação que troca o “clima” durante

   a viagem do navio https://github.com/DiegoPinho/workshop-cpmg2017

8. Requisitos Para conseguir subir a nossa aplicação, vamos precisar instalar

   algumas ferramentas: Node (6 LTS) npm ( > 3.x) Editor de texto Para editor de texto, recomendamos o Atom, editor de código aberto desenvolvido pela equipe do GitHub. Mas há também outras ótimas opções, como o Sublime e o Visual Code Studio, da Microsoft.

9. Primeiros passos O primeiro passo para fazer a aplicação funcionar

   é instalar o pacote create-react-app globalmente na sua máquina utilizando o npm. Para isso, basta executar no seu terminal o seguinte comando: npm install -g create-react-app Isso fará com que o pacote seja instalado na sua máquina de forma global, ou seja, você poderá acessar a qualquer momento através do seu terminal

10. Conhecendo o create-react-app O create-react-app é um pacote que nos

    permite criar aplicações web utilizando o React sem a necessidade fazer qualquer configuração de build. Todas as ferramentas necessárias para desenvolvimento e deploy já estão embutidas. webpack eslint auto prefixer jest babel muito mais!

11. O que veremos na prática Vamos cobrir todos os pontos

    fundamentais sobre o React: 1. Ciclo de vida dos componentes 2. O método render 3. State e Props 4. A função bind

12. Muito obrigado! Dúvidas? Críticas? Sugestões? Entre em contato! → http://wwww.diegopinho.com.br

    Veja também: