Se você já teve alguma experiência com aplicações em React, com certeza já acabou tentando retornar dois – ou mais – elementos no método render do componente, sem que eles estivessem encapsulados por uma div. Para quem não entendeu nada, basicamente até a versão 15 do React, ele nos obrigava a encapsular os componentes dentro de uma tag, geralmente uma div.

Isso significa que esse código abaixo, por exemplo, não funciona:

class App extends React.Component {
  render() {
	return (
 	  <p>Olá mundo</p>
 	  <p>Tudo bem?</p>
	)
  }
}

Mas se os colocar dentro de uma div, ele funciona:

class App extends React.Component {
  render() {
	return (
       <div>
   	    <p>Olá mundo</p>
   	    <p>Tudo bem?</p>
       </div>
      )
  }
}

Com o React 16 isso mudou. Agora somos capazes de renderizar os componentes diretamente passando eles em um array como retorno do método render. Não entendeu? Vamos ver um exemplo prático para compreender melhor. Por exemplo, se quisermos listar uma simples lista de nomes em várias tags <p>, não há necessidade de encapsular isso, basta fazer o seguinte:

class App extends React.Component {
  render() {
    return [
      <p key="1">João</p>,
      <p key="2">Maria</p>,
      <p key="3">Dagoberto</p>
    ]
  }
}

Notem que, como estamos lidando com um array, precisamos indicar ao React como identificar de forma única os elementos usando a propriedade key. Muito prático.

Além disso, outro aspecto interessante, é que também podemos renderizar textos diretamente, mesmo sem nenhuma tag em volta.

class App extends React.Component {
  render() {
    return  “Olá mundo!”
  }
}

Muito bacana, não é mesmo? Isso facilita bastante a legibilidade do código e a nossa vida ao desenvolver aplicativos em React. Você pode executar e editar este código no CodePen clicando aqui, ou ver mais explicações neste vídeo:

Conclusão

Esta é apenas uma das novas funcionalidades do React 16 que tornam a nossa vida mais fácil. Caso queira saber mais sobre as melhorias do React, assista ao meu curso gratuito sobre o tema no Youtube (ou no Udemy). Nas referências, também segue o link da documentação oficial para maiores detalhes.

Referências

• https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings
• https://www.udemy.com/react-16/