PROGRAMERO

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

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

Hoje iremos criar um "Hello World" com react passo a passo, a ideia é passar por todas as etapas necessárias desde a criação até a geração para publicação. Node: Como iremos utilizar o "Create React App" precisaremos do Node ( baixar aqui ); Instalando o Create React App: No prompt de comando executar "npm install -g create-react-app"; Criando nossa aplicação: No prompt de comando selecionar uma pasta (C:\Projects por exemplo) e  executar "create-react-app hello-app"; Feito isso, tudo que é necessário para nossa primeira aplicação estará instalado, para testar se tudo esta correto: Entrar no diretório da aplicação: No prompt de comando executar "cd hello-app"; Abrir o web server: No prompt de comando executar "npm start" (é provável que seja solicitado liberação de acesso para o Node); Como podemos perceber nossa aplicação esta "hospedada" e "rodando", qualquer alte