Introdução ao desenvolvimento com React

Workshop realizado na Campus Party 2017

http://campuse.ro/events/campus-party-minas-gerais-2017/workshop/introducao-ao-desenvolvimento-com-react-cpmg2/

Transcript

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

   View Slide

2. - Conceitos
   - Create React App
   - Aplicação prática
   - Considerações finais
   Sumário
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. O que construiremos?
   Uma aplicação que troca o “clima” durante a viagem do navio
   https://github.com/DiegoPinho/workshop-cpmg2017
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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!
    

    View Slide

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
    

    View Slide

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

    View Slide