Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução ao desenvolvimento com React

Diego Martins de Pinho
October 30, 2017
88

Introdução ao desenvolvimento com React

Diego Martins de Pinho

October 30, 2017
Tweet

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