Pular para o conteúdo
angular challenges logo Angular Challenges

🔴 React em angular

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.

Terminal window
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.

Contribuidores

Obrigado a todos os contribuidores que ajudaram a melhorar esta documentação!

  • tomalaforge 45