Neste screencast de emparelhamento, Sarah Drasner se junta a mim e me orienta em alguns dos meus primeiros aprendizados de React. Abordamos algumas funcionalidades de estilo do “mundo real”: um formulário de comentário.
Isso acabou sendo uma interface de usuário bastante útil para trabalhar, pois exigia muitas coisas fundamentais para o React (ou pelo menos, parece-me). Por exemplo, um “aplicativo” mestre que lida com state(nosso grande “estado” são os próprios comentários) e componentes que lidam com a renderização da visualização (por exemplo, o formulário de comentário é um componente e cada comentário é um componente).
Em seguida, abordamos várias coisas menores do React, mas também coisas enormes para entender no React-land, como:
props- uma maneira de passar dados entre componentes. Eles se parecem com atributos HTML quando você os envia e chegam como um objeto na forma de this.props.refs- como você retira dados do elemento de formulário que criamos.keys- uma maneira de identificar exclusivamente um componente quando ele é repetido. Estamos repetindo comentários aqui (pode haver vários comentários), então se tivéssemos uma funcionalidade que pudesse alterar qualquer um deles, ter uma chave é o que torna o React eficiente (ele pode apenas substituir aquele único comentário em vez de todos eles) .
E mais uma tonelada!
Aqui está a demonstração em que trabalhamos:
Veja o formulário de comentário da caneta iniciando um React-Powered por Chris Coyier (@chriscoyier) no CodePen.
Como você aumenta o nível de seu aprendizado do React além disso? Começa aqui.