45-react-in-angular.md

title	🔴 React em angular
description	Desafio 5 é sobre aprender como se beneficiar das várias bibliotecas em React
author	wandrille-guesdon
challengeNumber	45
command	angular-react-in-angular
sidebar	order 209

O objetivo deste desafio é usar um componente React dentro de uma aplicação Angular.

Muitos componentes estão disponíveis em React, e pode ser interessante usar eles em uma aplicação Angular. O objetivo é criar um componente React e usar em uma aplicação Angular.

Informação

Neste desafio temos uma simples aplicação e um componente React ReactPost em app/react para ilustrar um componente React de uma biblioteca.

Declaração

• Sua tarefa é mostrar as postagens com o componente React ReactPost.
• Quando selecionar uma postagem, a postagem deve ser destacada.

Para brincar com o componente React, você deve começar instalando as dependências do React.

npm i --save react react-dom
npm i --save-dev @types/react @types/react-dom

Restrições

• Não transforme o componente React em um componente Angular. O componente React é bem simples e pode ser escrito facilmente em Angular. No entanto, o objetivo é usar o componente React.

Dica

Dica 1 - Configuração

Permita arquivos React no tsconfig.json

{
...
"compilerOptions": {
  ...
  "jsx": "react"
},
...
}

Dica 2 - Initialização

Crie uma raiz react com `createRoot(...)`

Dica 3 - Visualização

Para renderizar o componente, ele deve parecer com: ``` .render( ... ) ```

Dica 4 - Design

Não esqueça de permitir o arquivo react no Tailwind.