Aprenda React 18: separando JavaScript e JSX

Em nosso tutorial anterior, vimos como usar JSX para escrever a estrutura de nosso componente resulta em um código mais limpo, curto e fácil de entender em comparação com o uso de JavaScript vanilla.

Até agora, criamos apenas nossos componentes usando JSX, onde não precisamos depender de lógica ou condicionais para determinar a estrutura do componente. Por exemplo, o Country componente simplesmente gera algum texto diretamente com base no props valores que passamos para ele.

Você normalmente terá que fazer pelo menos um pouco de processamento de entrada props dados ao criar componentes React na vida real. Neste tutorial, nosso foco será aprender como fazer isso corretamente, separando JavaScript e JSX.

Usando expressões JavaScript em JSX

O JSX permite incorporar qualquer expressão JavaScript válida, desde que esteja entre chaves. Usamos esse recurso anteriormente para acessar valores do props objeto.

  
Country Name: {props.name}
  
Capital: {props.capital}
  
Population: {props.population}

Expressões em JavaScript são pedaços de código que, em última análise, resolvem para um valor. No exemplo acima, props.name resolvido para o nome do país. Poderíamos adicionar o toUpperCase() método para capitalizar o nome do país e ainda funcionaria. Você tem permissão para fazer essas operações simples dentro dos colchetes.

Usando condicionais dentro do JSX

Podemos usar o && operador para renderizar um elemento condicionalmente em JSX com base no valor booleano de uma expressão. Aqui está como funciona. Vamos dizer que você escreve true && expression com as chaves no JSX, isso resolverá expression. Por outro lado, false && expression sempre resolverá false e nada será processado.

Podemos reescrever nosso Country componente para que ele use condicionais para produzir algumas instruções com base no valor booleano.

function Country(props) {
  return (
    

      
Country Name: {props.name}
      
Population: {props.population}
      

        Area: {props.area} km2
      
      

        {props.democracy && `${props.name} is a Democracy.`}
      
      

        {props.population / props.area > 200 &&
          `${props.name} is densly populated.`}
      
      

        {props.continent == "Asia"
          ? `${props.name} is in Asia.`
          : `${props.name} is not in Asia.`}
      
    
  );
}

let countryElement = (
  <>
    
    
  
);

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);

Nós passamos um democracy prop para ambos os nossos Country componentes. Seu valor padrão tornou-se true já que não lhe atribuímos nenhum valor. Como resultado, props.democracy retornará true. O basicamente significa que a seguinte linha

{props.democracy && `${props.name} is a Democracy.`}

torna-se efetivamente

{true && `${props.name} is a Democracy.`}

Na próxima linha, fazemos algo um pouco mais complicado e verificamos se a população por unidade de área é superior a 200. Se for superior a 200, emitimos uma declaração sobre a densidade populacional.

Você pode usar o operador ternário entre chaves quando quiser renderizar algo independentemente do valor passado avaliado como positivo ou negativo. Foi o que fizemos com o continent suporte. Tente sua própria condicional dentro do JSX de maneira semelhante.

Separando JavaScript e JSX

A beleza do JSX é que ele é fácil de ler e nos permite construir estruturas de componentes complexos facilmente. No entanto, introduzir mais e mais lógica usando chaves é contraproducente. O objetivo é manter o JSX o mais declarativo possível e lidar com a lógica separadamente.

Digamos que queremos listar os cinco maiores estados de um país dentro do nosso componente. Poderíamos passá-los junto com outros valores como prop. Depois disso, podemos iterar sobre a lista de estados e criar um monte de

function Country(props) {
  
  let popDensity = props.population/props.area; 
  let popFeature = popDensity > 200 ? 'sparsely' : 'densly';
  
  let isDemocracy = props.democracy && `${props.name} is a Democracy.`;
  
  let states = props.largestStates.map(state => 
{state}
);
 
  return (
    

      
Country Name: {props.name}
      
Population: {props.population}
      
Area: {props.area} km2
      
{isDemocracy}
      
It is {popFeature} populated.
      
Five Largest States:
      

        {states}
      
    
  );
}

let countryElement = (
  <>
    
  
);

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);