Agora, para mostrar nossa lista de metas, aqui na visão, quero simplesmente produzir alguns componentes de texto por enquanto, onde
simplesmente imprimo meu objetivo e, para isso, podemos inserir uma expressão dinâmica aqui com chaves de abertura e fechamento únicas e agora nos referimos
aos objetivos do curso,
que é essa variável que temos aqui com a desestruturação do array. Objetivos do curso é o nosso conjunto de metas e agora,
como no React normal, que é
uma diferenciação que eu realmente não gosto porque estamos usando o React normal aqui no final, então, como
você sabe do
React for web projects, agora você pode mapear essa matriz de dados em uma matriz de componentes com o
método map, que é um método normal de Javascript. O método map usa uma função que é executada em
todos os itens do array, então
aqui nós
temos nosso objetivo e então temos que retornar um novo componente aqui. Mais uma vez eu vou usar esta sintaxe de função de
seta inline onde em vez de ter chaves e, em seguida, retornar algo, omitir as chaves e omitir
a declaração de retorno, esta é sintaxe JavaScript válida, isso também
retornará o que eu inserir aqui.
O que eu quero retornar é um componente de texto,
então esse componente de texto nós importamos do React Native e com isso, podemos mostrar nossa meta aqui porque um objetivo nos objetivos do curso será apenas
um texto porque o que adicionamos aos objetivos do curso é o entrou meta e a meta inserida é
o que obtemos de entrada de texto e isso é apenas texto.
Então aqui, agora estamos apenas produzindo algum texto e estou mapeando todas as metas do meu curso
em componentes de texto que serão mostrados nesta visão aqui. E com isso, se nós salvarmos isso, nós já
poderemos começar
a adicionar alguns objetivos, então aprender Reagir Nativa é uma coisa que eu posso entrar aqui, aperte add e
aqui está, aprenda de
verdade e nós pegamos isso também e se Você também quer fazer
algumas panquecas, você pode fazer isso também e, claro, isso também funciona
no iOS, aprender React Native for real e, claro, eu ainda quero fazer algumas panquecas.
Então isso está funcionando e é assim que podemos produzir uma lista simples e trivial de itens aqui.
Agora, é claro, esses itens parecem um tanto chatos, então talvez possamos aplicar alguns estilos lá
para fazê-los parecerem melhores. Antes de fazer isso,
observe que temos um erro aqui no nosso terminal.
Agora, nosso aplicativo funciona claramente, mas o erro que estamos recebendo aqui é que cada filho em
uma lista deve ter uma chave exclusiva e essa é uma regra React normal, nada específico para React Native.
Na verdade, você deve sempre, ao mapear isso para uma lista de widgets, atribuir uma chave aqui para que o React possa
atualizar com eficiência essa lista nos bastidores, se necessário. Você faz isso adicionando uma chave prop aqui e, em seguida,
a chave deve ser um identificador único, pois agora
vamos com a meta em si que não é estritamente única, você poderia inserir a
mesma meta com o mesmo texto duas vezes, o que lhe daria uma erro, mas
por enquanto vamos supor que você não está
fazendo isso, portanto, podemos usar o objetivo como uma chave e, se fizermos isso, estaremos nos livrando desse aviso.
Se eu aprendi agora o React Native, posso adicionar isso sem um erro.
Novamente, se eu adicionar o mesmo texto duas vezes, então tecnicamente eu nem recebo um erro aqui, mas isso seria errado,
aqui
está, aqui está o erro porque eu tenho dois filhos com a mesma chave.
Então, por enquanto, vamos supor que você não faça isso,
essa é a regra de chave normal que você tem no Reagir normal também.
Então, vamos supor que você não tenha o mesmo objetivo duas vezes e vamos continuar com o estilo desses
itens, porque, no momento, eles não parecem muito empolgantes.