Primeiros Passos com React: Construindo Aplicações web

✍ Scribed by Stoyan Stefanov

• Publisher: Novatec Editora
• Year: 2016
• Tongue: Portuguese
• Leaves: 273
• Category: Library

✦ Synopsis

Saia trabalhando de imediato com React: a tecnologia de código aberto do Facebook para construir rapidamente aplicações web sofisticadas. Com este guia prático, o desenvolvedor web Stoyan Stefanov ensina você a construir componentes – os blocos de construção básicos da React – e a organizá-los em aplicações de larga escala, viáveis do ponto de vista da manutenção. Se você tiver familiaridade com a sintaxe básica de JavaScript, estará pronto para começar.

Depois de entender como React funciona, você construirá uma aplicação personalizada Whinepad completa para ajudar os usuários a classificar vinhos e a guardar anotações. Você aprenderá rapidamente por que alguns desenvolvedores consideram React essencial para o quebra-cabeça que é o desenvolvimento de aplicações web.

Instale React e escreva sua primeira aplicação web “Hello world”.
Crie componentes React personalizados, usando-os juntamente com componentes DOM genéricos.
Construa um componente de tabela de dados que permita editar, ordenar, pesquisar e exportar seu conteúdo.
Utilize a extensão de sintaxe JSX como alternativa a chamadas de função.
Configure um processo de construção simples, de baixo nível, que ajude você a se concentrar na React.
Construa uma aplicação personalizada completa que permita armazenar dados no cliente.
Use as ferramentas ESLint, Flow e Jest para verificar e testar o seu código à medida q

✦ Table of Contents

Prefácio
capítulo 1
Hello World
Instalação
Hello World com a React
O que aconteceu?
React.DOM.*
Atributos especiais do DOM
Extensão de navegador React DevTools
A seguir: componentes personalizados
capítulo 2
A vida de um componente
O mínimo necessário
Propriedades
propTypes
Valores default das propriedades
Estado
Um componente textarea com estado
Uma observação sobre eventos do DOM
Tratamento de eventos nos velhos tempos
Tratamento de eventos na React
Propriedades versus estado
Propriedades no estado inicial: um antipadrão
Acessando o componente de fora
Alterando as propriedades durante a execução
Métodos de ciclo de vida
Exemplo de ciclo de vida: fazendo log de tudo
Exemplo de ciclo de vida: usando uma mixin
Exemplo de ciclo de vida: usando um componente-filho
Ganho de desempenho: evitando atualizações de componentes
PureRenderMixin
capítulo 3
Excel: um componente de tabela elegante
Primeiro os dados
Laço para cabeçalhos da tabela
Depurando o aviso do console
Adicionando o conteúdo de
Como podemos melhorar o componente?
Ordenação
Como podemos melhorar o componente?
Pistas sobre ordenação na UI
Editando dados
Célula em que é possível editar
Célula com campo de entrada
Salvando
Conclusão e diferenças com o DOM virtual
Pesquisa
Estado e UI
Filtrando o conteúdo
Como podemos melhorar a pesquisa?
Reprodução instantânea
Como podemos melhorar a reprodução?
Uma implementação alternativa?
Download dos dados da tabela
capítulo 4
JSX
Hello JSX
Transpilação do JSX
Babel
Lado do cliente
Sobre a transformação de JSX
JavaScript em JSX
Espaço em branco no JSX
Comentários no JSX
Entidades HTML
AntiXSS
Propagação de atributos
Propagação de atributos de pai para filho
Devolvendo vários nós no JSX
Diferenças entre JSX e HTML
Sem class nem for
style é um objeto
Tags de fechamento
Atributos camelCase
JSX e formulários
Handler onChange
value versus defaultValue
Valor de <br /> Valor de <select><br /> O componente Excel em JSX<br /> capítulo 5<br /> Preparando-se para o desenvolvimento de aplicações<br /> Uma aplicação boilerplate<br /> Arquivos e pastas<br /> index.html<br /> CSS<br /> JavaScript<br /> JavaScript: modernizado<br /> Módulos<br /> Módulos ECMAScript<br /> Reunindo tudo<br /> Instalando os pré-requisitos<br /> Node.js<br /> Browserify<br /> Babel<br /> React e outros pacotes<br /> Vamos fazer a construção<br /> Transpilar o JavaScript<br /> Empacotar o JavaScript<br /> Empacotar o CSS<br /> Resultados!<br /> Versão para Windows<br /> Construindo durante o desenvolvimento<br /> Implantação<br /> Prosseguindo<br /> capítulo 6<br /> Construindo uma aplicação<br /> Whinepad v.0.0.1<br /> Configuração<br /> Comece a programar<br /> Os componentes<br /> Configuração<br /> Descoberta<br /> Componente <Button><br /> Button.css<br /> Button.js<br /> Formulários<br /> <Suggest><br /> Componente <Rating><br /> Uma “factory” <FormInput><br /> <Form><br /> <Actions><br /> Diálogos<br /> Configuração da aplicação<br /> <Excel>: novo e melhorado<br /> <Whinepad><br /> Concluindo<br /> capítulo 7<br /> Lint, Flow, testar, repetir<br /> package.json<br /> Configure o Babel<br /> scripts<br /> ESLint<br /> Configuração<br /> Execução<br /> Todas as regras<br /> Flow<br /> Configuração<br /> Execução<br /> Inscrevendo-se para verificação de tipos<br /> Corrigindo <Button><br /> app.js<br /> Mais sobre verificação de tipos em propriedades e no estado<br /> Exportação/importação de tipos<br /> Casting de tipo<br /> Invariantes<br /> Testes<br /> Configuração<br /> Primeiro teste<br /> Primeiro teste com a React<br /> Testando o componente <Button><br /> Testando <Actions><br /> Mais interações simuladas<br /> Testando interações completas<br /> Cobertura<br /> capítulo 8<br /> Flux<br /> A grande ideia<br /> Analisando o Whinepad novamente<br /> A Store<br /> Eventos da Store<br /> Usando a Store em <Whinepad><br /> Usando a Store em <Excel><br /> Usando a Store em <Form><br /> Definindo o limite<br /> Actions<br /> CRUDActions<br /> Pesquisando e ordenando<br /> Usando Actions em <Whinepad><br /> Usando Actions no <Excel><br /> Recapitulando o Flux<br /> Imutável<br /> Dados imutáveis na Store<br /> Manipulação de dados imutáveis<br /> Sobre o autor<br /> Colofão</p> </div> </section> </div> <div class="mt-10"> <div class="flex items-center gap-3 mb-6"> <hr class="divider flex-1"> <p class="cinzel text-xs tracking-[0.25em] shrink-0" style="color:var(--gold);">📜 SIMILAR VOLUMES</p> <hr class="divider flex-1"> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Aplicações Web Real Time com Node.js </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/aplicações-web-real-time-com-nodejs-27980780" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Aplicações Web Real Time com Node.js </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Casa do Código</span> <span>📂 Library</span> <span>📅 0</span> <span>🌐 Portuguese</span> </div> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Meteor: Criando aplicações web real-time </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/meteor-criando-aplicações-web-real-time-com-javascript-27907048" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Meteor: Criando aplicações web real-time com JavaScript </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Caio Ribeiro Pereira</span> <span>📂 Library</span> <span>📅 2014</span> <span>🏛 CASA DO CODIGO</span> <span>🌐 Portuguese</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> O JavaScript já é uma opção real de desenvolvimento server-side. Trabalhar com a mesma linguagem que utilizamos no front-end é também uma grande vantagem. Diversos frameworks surgiram e, sem dúvida, o Meteor é que mais se destaca. Neste livro, venha desenvolver sua própria rede social do zero imple </p> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Java – Aplicações Web </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/java-aplicações-web-28883418" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Java – Aplicações Web </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Paulo Henrique Cayres</span> <span>📂 Library</span> <span>📅 2017</span> <span>🏛 Rede Nacional de Ensino e Pesquisa – RNP</span> <span>🌐 Portuguese</span> </div> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Equações Diferenciais com Aplicações em </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/equações-diferenciais-com-aplicações-em-modelagem-30934548" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Equações Diferenciais com Aplicações em Modelagem </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Zill, Dennis G.</span> <span>📂 Library</span> <span>📅 2003</span> <span>🏛 Thomson</span> <span>🌐 Portuguese</span> </div> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Aplicações Java para a web com JSF e JPA </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/aplicações-java-para-a-web-com-jsf-e-jpa-27907384" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Aplicações Java para a web com JSF e JPA </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Gilliard Cordeiro</span> <span>📂 Library</span> <span>📅 2014</span> <span>🏛 CASA DO CODIGO</span> <span>🌐 Portuguese</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> Neste livro você encontrará as especificações mais utilizadas do Java, explicadas com exemplos práticos e claros que mostram como usar cada tecnologia em separado e como utilizá-las em conjunto. Conheças as melhores práticas da JPA 2.0, seus mapeamentos, caches e truques de performance, e tire o má </p> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Pentest em aplicações web </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/pentest-em-aplicações-web-29488303" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Pentest em aplicações web </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Daniel Moreno</span> <span>📂 Library</span> <span>📅 2017</span> <span>🏛 Novatec Editora</span> <span>🌐 Portuguese</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> Aplicações web têm um histórico extenso de vulnerabilidades, que têm sido exploradas pelos hackers. A lista de ataques conhecidos é extensa, envolvendo Cross-site Scripting, SQL Injection, unrestricted file upload, Code Injection, Command Injecion, Remote/Local File Inclusion e Cross-site Request Fo </p> </div> </div> </article> </div> </div> </div> </main> <footer style="border-top:2px solid var(--gold); background:var(--parchment-d);" class="mt-16 py-8 text-center text-sm"> <p class="fraktur text-2xl ornament mb-1">❧ Scriptorium Liberum ❧</p> <p style="color:var(--ink-faint);" class="cinzel text-xs tracking-wider"> 130M+ Volumes · Free Search & Download · No Pledge of Fealty Required </p> <p class="mt-2 text-xs" style="color:var(--ink-faint);"> Tomes are for personal study only and may not be traded for coin or commerce. </p> </footer> </body> </html>