PROGRAMERO

Os componentes no React, assim como recursos de diversas outras tecnologias, possui um ciclo de vida bem definido, ou seja, sabemos exatamente as etapas executadas da criação a destruição de um componente. Os métodos do ciclo de vida de componentes são invocados em diferentes momentos, e eles podem ser organizados em três grupos: "mounting" onde são montados na tela, "updating" onde são atualizados e "unmounting" onde são desmontados e removidos da tela. Mounting Nesse momento temos a inicialização, a construção dos componentes (pré/pós) e a renderização. constructor Chamado antes que o componente seja montado: getDerivedStateFromProps Executado antes da renderização (render): render Único método puro, devendo sempre se manter puro, ou seja, sem modificar o estado do componente: componentDidMount Executado após a montagem do componente: componentWillMount (legado, não deve ser usado)

Hesitação significa morte Observar, Orientar, Decidir, Agir. Saiba onde você está, avalie suas alternativas, tome uma decisão e aja!  Olhe para fora para obter respostas Sistemas adaptativos complexos seguem algumas regras simples, que são captadas do ambiente.  Equipes excelentes  São multifuncionais, autônomas e capacitadas, com um propósito transcendente.  Não adivinhe Adote o ciclo PDCA. Planeje, faça, verifique, aja. Planeje o que você vai fazer. Faça. Verifique se o produto alcançou o resultado desejado. Aja em relação a isso e mude a forma como está fazendo as coisas. Repita o processo em ciclos regulares e, desse modo, alcance um aperfeiçoamento contínuo. Shu Ha Ri Primeiro, aprenda as regras e as formas. Quando tiver domínio delas, inove. Por fim, em um estado elevado de maestria, descarte as formas e apenas seja – com todo o conhecimento internalizado e as decisões tomadas quase inconscientemente. Trechos do excelente livro "Scrum: The Art

No exemplo anterior vimos o "props", capaz de armazenar propriedades que podem ser compartilhadas entre os componentes, e hoje veremos o "state", ambos são parecidos, porém o "state" é privado e controlado integralmente pelo componente. Também veremos eventos que serão capazes de alterar o estado de nosso componente assim como veremos como se comporta o ciclo de vida de um componente. State Como já foi dito, o "state" é privado e pertence ao componente, ele também possui outras peculiaridades: Modificando o estado Só é permitida a atribuição no construtor da classe, logo a única forma de alterar um valor no estado é por meio do método "setState", abaixo exemplo de atribuição no construtor e de alteração em um método chamado "alterarEstado": cosntructor(props) {     super(props);     this.state = { nome: 'Adamastor'}; } alterarEstado(novoNome) {     this.setState({         nome: novoNome

Planejar é útil, seguir cegamente os planos é burrice É muito tentador desenhar inúmeros gráficos. Todo o trabalho que precisa ser feito em um projeto de grande porte aparece ali, detalhado, para todos verem, mas quando se deparam com a realidade, os planos desabam. Inclua no seu método de trabalho a possibilidade de mudança, descoberta e inovação.  Inspeção e adaptação De tempos em tempos, pare o que está fazendo, revise o que já fez e verifique se deveria continuar fazendo a mesma coisa ou se existe uma maneira melhor de fazer.  Mude ou morra Agarrar-se ao modo antigo de fazer as coisas – comando, controle e previsibilidade rígida – só resultará em fracassos. Nesse meio-tempo, o concorrente que estiver disposto a inovar vai deixar você para trás.  Fracasse rápido para que possa corrigir o problema quanto antes A cultura corporativa costuma dar mais valor a formulários, procedimentos e reuniões do que à criação de valor concreto, que possa ser verificado a curtos

O uso de eventos no React é muito parecido com o que já fazemos em html, a diferença fica por conta da nomeação, que deve ser em "camelCase" e no luga de texto sempre é passado uma função como manipulador. Além disso, para evitar o comportamento padrão de um evento, antes era informado o "return false", e no React devemos sempre usar o "preventDefault". Evento padrão "< button onclick="salvar(); return false; > Salvar < / button >" Evento React "< button onclick="{salvar}" > Salvar < / button > function salvar(e) {     e.preventDefault(); } Passagem de argumentos Como não poderia de deixar de ser, é perfeitamente possível passar argumentos para os manipuladores de eventos, podemos usar "arrow functions" ou "bind": "< button onclick={(e) = > this.remover(id, e)} > Remover < / button >" "< button onclick={this.remover.bi

Uma das características no desenvolvimento com o React é a capacidade de construir componentes, capazes de serem reutilizados em diversas partes do sistema. Os componentes nos permitem dividir o sistema em pequenas partes, reutilizáveis e independentes, proporcionando uma grande capacidade de reutilização e isolamento, evitando replicação de código e dores de cabeça com a substituição ou mesmo manutenção em partes do sistema. Em resumo, componentes são rotinas Javascript, capazes de receber propriedades e devolver elementos HTML. Exemplo Vamos agora ao exemplo, criaremos uma aplicação e a seguir iremos desenvolver um componente que irá representar um cliente, com nome e endereço: Criando a aplicação npx create-react-app componentes-propriedades Criando o novo componente Vamos criar o componente cliente, que retornará informações do mesmo, a ideia aqui é retornar uma "div" com um parágrafo com o nome e um texto com o endereço. No diretório &quo

Diretiva que tem como objetivo controlar o escopo de variáveis, prevenindo que as variáveis sejam criadas de forma global, ou seja, que as variáveis possam impactar em escopos que não lhes dizem respeito, em resumo ele bloqueia declarações sem o "var". Para usar essa diretiva basta incluir a "string" 'use strict' no inicio do escopo que se deseja controlar, vamos aos exemplos: (function(){   var teste1 = 'abc';   teste2 = 'def'; })(); console.log(teste1); //gera erro pois não pertence a esse escopo console.log(teste2); //mostra o valor pois pertence ao escopo global Para prevenir o problema: (function(){   'use strict';   var teste3 = 'abc';   teste4 = 'def'; //aqui já ocorre o erro })(); with Esse comando cria um escopo que nos permite acessar propriedades de um objeto de forma direta. Por convenção seu uso é desaconselhável por poder gerar problemas com outras