React - Uma introdução bem básica

React - Uma introdução bem básica - IX

Neste artigo vou apresentar uma introdução bem básica ao React.

Renderização Condicional

Vejamos agora como realizar a renderização condicional no React.(veja o artigo anterior aqui)

No React, você pode criar componentes distintos que encapsulam o comportamento que você precisa. Então, você pode renderizar apenas alguns deles, dependendo do estado do seu aplicativo.

A renderização condicional no React funciona da mesma forma que as condições funcionam no JavaScript. Use operadores JavaScript, como if, ou o operador condicional (ternário), para criar elementos que representam o estado atual e deixe o React atualizar a interface do usuário para que correspondam a esses estados.

Vamos considerar o componente contador que estamos tratando nesta série de artigos.

Vamos simplificar o seu código de forma termos somente o array de itens e o código para sua renderização conforme mostrado abaixo:

Executando o projeto agora : npm start e abrindo o navegador em localhost:3000 teremos o resultado abaixo:

Muito bem. Vamos partir desse ponto.

Agora vamos supor que desejamos renderizar o array de elementos apenas se houver elementos no array. Caso contrário vamos exibir a mensagem 'Não existem itens'.

Para isso vamos separar a lógica e definir a condição de exibição usando javascript.

Vamos criar um operador chamado renderItens() conforme mostra o código a seguir:

Agora ao executar o projeto, havendo itens no array, iremos obter no navegador a exibição dos itens:

Mas se removermos todos os itens do array ao executar teremos:

Muito simples...

Vejamos agora outra técnica para realizar a renderização condicional.

Podemos usar o operador AND (&&) do JavaScript e definir uma condição para renderização.

Vamos definir a seguinte condição :

{this.state.itens.length === 0 && 'Inclua um item...'}

A lógica acima determina que : Se o tamanho do array for igual a zero (true) E 'Inclua um item' for true teremos o resultado exibindo: 'Inclua um item'

Vamos incluir esta linha de código no método Render() conforme mostrado abaixo:

Executando teremos:

Se você não conhece JavaScript deve estar pensando: 'Mas que lógica doida é essa ??? '

Calma, vamos entender como funciona a avaliação do operadores && ou AND no JavaScript.

A nossa expressão lógica usando o operador && e pode ter dois valores:

1- this.state.itens.length === 0 Que é uma expressão booleana que vai retornar true ou false se o array possui ou não itens;

2- 'Inclua um item...' Uma string

Na linguagem JavaScript podemos usar os operadores lógicos com valores não booleanos como uma string ou um número.

Ao avaliar a expressão contendo uma string se a string possuir pelo menos um caractere, ou seja, se não for vazia, o JavaScript considera como true. Se a string for vazia será false.

Então como a primeira parte da expressão é true a segunda parte será avaliada, e, para o exemplo temos uma string não vazia que será convertida para true e será retornada.

Para constatar esse comportamento abra uma janela de comandos do Node e digite:

> true && 'Macoratti' vai retornar 'Macoratti' pois temos uma string não vazia. Podemos também usar números onde zero é considerado false e os demais valores true.