Introdução ao desenvolvimento com React

9ce1dc6b940b4ab85ecb2f1eacfbe7c1?s=47 Diego Martins de Pinho
October 30, 2017
70

Introdução ao desenvolvimento com React

9ce1dc6b940b4ab85ecb2f1eacfbe7c1?s=128

Diego Martins de Pinho

October 30, 2017
Tweet

Transcript

  1. 2.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 7.

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

    a viagem do navio https://github.com/DiegoPinho/workshop-cpmg2017
  7. 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.
  8. 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
  9. 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!
  10. 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