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
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: