Obtenha sua cabeça reaja com esses cinco fatores

Aprendizagem reagir, a biblioteca JavaScript para criar interfaces de usuário do Facebook e Instagram parece noz até que você dê uma chance. As coisas ficam muito mais fáceis quando você entende cinco conceitos-chave. Eu chamo estes os cinco turnos da mente. Eles são: Componentes, JSX, Estado, métodos do ciclo de vida e fluxo de dados unidirecional.

01. Componentes.

Os componentes são pedaços de código que podem ser combinados para fornecer funcionalidade mais complexa. Quando você divide sua inscrição em componentes, torna mais fácil atualizar e manter. Em reagir, os componentes são ainda mais importantes: você não apenas os programou, você projeta seu aplicativo pensando em como esses componentes se encaixam.

Vamos usar a interface abaixo como exemplo. Você pode ver como ele pode ser dividido em três peças: uma caixa para reservar uma nova consulta, uma visualização de lista que permite visualizar os compromissos existentes e uma caixa de pesquisa para olhar através deles.

Em HTML, você pode pensar nesta aplicação como uma série de elementos, assim:

 & lt; div id = "petapointments" & gt;
  & lt; div class = "addappointments" & gt; & lt; / div & gt;
  & lt; div classe = "SearchAppointments" & gt; & lt; / div & gt;
  & lt; div class = "listappointments" & gt; & lt; / div & gt;
& lt; / div & gt; 

E isso também é o que você faria em reagir. Você cria uma única tag (& lt; div id = "petapointments" & gt;) que chama um componente de PetAppoints, que então chama os outros subcomponentes conforme necessário. Para passar um objeto de configuração como este, você usa o método CreateClass do objeto reagir.

 var maininterface = reagir.createClass ({
  Render: Função () {
    Retorna (
      & lt; div nomeame = "interface" & gt;
        & lt; indapapintment / & gt;
        & lt; SearchAppoints / & gt;
        & lt; listapapintments / & gt;
      & lt; / div & gt;
    )
  } // render
}); // maininterface.

Reattom.render (
  & lt; maininterface / & gt ;,
  Document.GetElementByID ('PETAPOPONTS')
); // render 

Existem dois métodos de renderização. Na classe Maininterface, nós declaramos que os itens que serão enviados para o navegador e o método reattdom.render substitui o & lt; div id = "petAppoints" & gt; / gt; / div & gt; elemento em seu html com código de reagir. Escreveríamos o código que lida com cada um dos nossos três subcomponentes.

Os componentes tornam o código fácil de escrever e manter. Depois de aprender a pensar e organizar seus aplicativos como uma série de componentes composíveis, a construção de aplicativos complexos se torna mais simples.

02. JSX.

Jsx. É provavelmente uma das maiores mudanças da mente e uma das razões pelas quais a biblioteca parece tão estranha. O JSX é uma extensão para o JavaScript que permite combinar o código XML com JavaScript.

Isso é uma espécie de que acontece com idiomas de modelos como o bigode, o que permite incluir JavaScript no HTML. Mas o JSX é traduzido (transpilado) em javascript. Então você não está apenas construindo um modelo, mas uma estrutura que é convertida em uma série de declarações de JavaScript. Ao contrário dos idiomas de modelos, não precisa ser interpretado no tempo de execução. Vamos ver um exemplo.

 & lt; li classname = "Mídia de item de estimação" chave = {index} & gt;
  & lt; div nomeame = "Pet-Info Mídia-Body" & GT;
    & lt; div nomeame = "pet-head" & gt;
      & lt; span classname = "pet-name" & gt; {this.state.data [index] .petame} & lt; / span & gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.data [index] .APTDate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; divameName Div = "Nome do proprietário" & gt; e lt; span classname = "etiqueta" & gt; proprietário: & lt; / span & gt;
    {this.state.data [index] .Ownername} & lt; / div & gt;
    & lt; div nomeame = "apt-notas" & gt; {this.state.data [index] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Podemos usar este código para produzir nossos compromissos. Isso parece muito como usar uma linguagem de modelagem regular, além de aprender algumas pequenas idiossincrasias sobre o JSX, você pode pegá-lo rapidamente.

A parte estranha sobre o uso do JSX não está aprendendo a própria língua; Está adquirindo o fato de que colocar HTML dentro do seu código JavaScript parece ... Bem, errado. Mas é muito bom ter todo o código para cada componente que vive em um único lugar.

03. Estado

O terceiro turno da mente está aprendendo a trabalhar com o estado em reagir. O estado é armazenado no componente superior do seu aplicativo e gerencia o que está acontecendo em seu aplicativo. Há um método especial chamado getInitialstate onde você pode configurar o que acontece quando seu aplicativo é iniciado.

No meu aplicativo de amostra, o estado inicial é configurado assim:

 var maininterface = reagir.createClass ({
  getInitialstate: função () {
    Retorna {
      AptosVisible: Falso,
      Ordenar por: 'PetName',
      OrderDir: 'Asc',
      QueryText: ''
    } //Retorna
  }, // getInitialstate 

Parece que estou configurando variáveis ​​globais para minha inscrição, mas modificar essas variáveis ​​realmente controla como os componentes são rendidos. Se algo no meu aplicativo alterar o valor de uma variável, meus componentes serão retribuídos. Se o valor da Oração for alterar, por exemplo, a lista de compromissos irá reordenar.

Quando você escreve um componente, é fácil modificar o estado do aplicativo. Escrever componentes é mais fácil, já que você só é focado no componente. Aqui está o componente final do meu aplicativo:

 var reagir = requer ('reagir');
var aptlist = reagir.createClass ({

  Handledelete: função () {
    this.props.ondelete (este.props.whichiitem)
  },

  Render: Função () {
    Retorna(
      & lt; li classname = "mídia de item de estimação" & gt;
        & lt; div nomeame = "mídia-esquerda" & gt;
          & lt; Button ClassName = "Pet-Delete BTN BTN-XS BTN-Danger" OnClick = {.t.t.handledelete} & gt;
          & lt; span classname = "glificon glificon-remover" & gt; & lt; / span & gt; & lt; / botão & gt;
        & lt; / div & gt;
        & lt; div nomeame = "Pet-Info Mídia-Body" & GT;
          & lt; div nomeame = "pet-head" & gt;
            & lt; span classname = "pet-name" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname spanname = "APT-DATE pull-right" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; divameName Div = "Nome do proprietário" & gt; e lt; span classname = "etiqueta" & gt; proprietário: & lt; / span & gt;
          {this.props.singleitem.apadame} & lt; / div & gt;
          & lt; div nomename = "apt-notas" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // Retorna
  } // render
}); // aptlist.

módulo.exports = aptlist; 

O componente só está preocupado com duas coisas. Primeiro, mostrando a lista de compromissos com base no estado atual do aplicativo. Em segundo lugar, lidar com um clique em um dos X's X's.

Clicar no 'X' irá empurrar uma alteração para o estado do aplicativo, fazendo com que esse componente seja re-renderizar. Eu não estou preocupado com o que está acontecendo com os dados, simplesmente com como os dados atuais serão exibidos.

O componente da lista só está preocupado com a listagem de coisas. Não precisa se preocupar com o que está acontecendo em outro lugar. É uma maneira brilhante de construir aplicativos e uma vez que você obtenha o jeito, você verá por que é uma maneira superior de codificar.

04. Fluxo de dados unidirecionais

A próxima mudança de mente é aprender a amar um fluxo de dados unidirecional. Em reagir, o estado da sua inscrição reside no componente superior. Quando você precisar alterá-lo em um subcomponente, você cria uma referência ao componente superior e lidar com lá. Isso é um pouco difícil de se acostumar. Aqui está um exemplo:

 var reagir = requer ('reagir');
var aptlist = reagir.createClass ({
  Handledelete: função () {
    this.props.ondelete (este.props.whichiitem)
  },
  Render: Função () {
    Retorna(
      & lt; li classname = "mídia de item de estimação" & gt;
        & lt; div nomeame = "mídia-esquerda" & gt;
          & lt; Button ClassName = "Pet-Delete BTN BTN-XS BTN-Danger" OnClick = {.t.t.handledelete} & gt;
          & lt; span classname = "glificon glificon-remover" & gt; & lt; / span & gt; & lt; / botão & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // Retorna
  } // render
}); // aptlist.

módulo.exports = aptlist; 

Esta é uma versão simplificada do módulo que cria uma lista de compromissos. Nossa lista tem um botão de exclusão, que gerenciamos através de um manipulador de eventos. Esta é uma versão especial reagir de OnClick. Nosso manipulador de eventos chama a função Handledelete, que é local para o sub-módulo. Nossa função local simplesmente cria uma referência a outra função em um objeto chamado Adereços. Os adereços são como os módulos principais se comunicam com sub-módulos.

No módulo principal, você criaria um atributo para a tag que você está usando para representar o módulo. Parece apenas passar um atributo para uma tag HTML:

 & lt; aptlist ondelete = {this.delelemessage} / & gt; 

E então você cria seu próprio método no componente principal para lidar com a alteração no estado do aplicativo. Manter o estado no módulo principal ajuda a tornar seus sub-módulos mais eficientes. Também é mais fácil manter o código porque a maior parte da ação acontece em um só lugar.

05. Métodos do ciclo de vida.

Uma das melhores coisas sobre reagir é a maneira como gerencia a renderização de seus módulos. Seus módulos não precisam se preocupar em atualizar o DOM, somente em reagir ao estado de sua inscrição. Quando o estado muda, reaja re-renderiza os componentes do seu aplicativo. Ele faz isso criando sua própria versão do DOM chamado um Dom virtual.

Mas às vezes você precisa ser capaz de fazer coisas em resposta ao renderização de vida. Digite os métodos do ciclo de vida. Estas são maneiras de pedir reagir para lidar com tarefas em diferentes pontos na execução do aplicativo.

Existem, por exemplo, métodos de vida útil que permitem carregar dados externos por meio de solicitações AJAX:

 ComponentDidMount: Função () {
  este.ServerRequest = $ .Get ('./ js / data.json', função (resultado) {
    var tempaptes = resultado;
    este.setate ({
      MyAppoints: Tempapts.
    }); // setstate.
  } .bind (isto));
}, // componentedidmount 

Aqui, o ComponentDidMount permite executar algo após a conclusão da renderização inicial. Este é um ótimo lugar para carregar o conteúdo AJAX, configurar temporizadores e assim por diante. Há muitos outros métodos de ciclo de vida que permitem capturar a execução do aplicativo em diferentes pontos. Eles são necessários por causa do Dom virtual de reagir, que é um grande momento ao construir aplicativos.

Repensar reagir

Reaja requer um repensar da maneira como você trabalha com aplicativos da Web, mas se você se concentrar em dominar os benefícios desses cinco mudanças mentais, você aprenderá rapidamente por que a biblioteca se tornou tão incrivelmente popular e é uma maneira fantástica de construir interfaces.

Este artigo - ilustrado por Ray Villalobos - foi originalmente publicado em questão 286 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Inscreva-se na Net. .

Quer refinar ainda mais suas habilidades reagir?

Se você estiver interessado em aprender mais sobre reagir, certifique-se de que você pegou seu ingresso para Gere Londres de 19 a 21 de setembro de 2018 . Tendo fundado reagir academia para ensinar reagir em todo o mundo e lançado sizzy.co. e ok-google.io. , Kristijan Ristovski estará entregando seu workshop - Aprenda a pensar em reagir - na qual ele explorará as melhores práticas reagirá e ensinará soluções a problemas reais que você pode encontrar no processo de construção de um aplicativo.

Gerar Londres ocorre de 19 a 21 de setembro de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

• 10 Dicas de Reactjs Especialistas que você precisa saber hoje
• Crie um aplicativo de painel com reagir
• Construa um simples leitor de música com reagir