You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Desafio 5 é sobre aprender como se beneficiar das várias bibliotecas em React
4
+
author: wandrille-guesdon
5
+
challengeNumber: 45
6
+
command: angular-react-in-angular
7
+
sidebar:
8
+
order: 209
9
+
badge: New
10
+
---
11
+
12
+
O objetivo deste desafio é usar um componente React dentro de uma aplicação Angular.
13
+
14
+
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.
15
+
16
+
## Informação
17
+
18
+
Neste desafio temos uma simples aplicação e um componente React `ReactPost` em `app/react` para ilustrar um componente React de uma biblioteca.
19
+
20
+
## Declaração
21
+
22
+
- Sua tarefa é mostrar as postagens com o componente React `ReactPost`.
23
+
- Quando selecionar uma postagem, a postagem deve ser destacada.
24
+
25
+
Para brincar com o componente React, você deve começar instalando as dependências do React.
26
+
27
+
```bash
28
+
npm i --save react react-dom
29
+
npm i --save-dev @types/react @types/react-dom
30
+
```
31
+
32
+
## Restrições
33
+
34
+
- 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**.
35
+
36
+
### Dica
37
+
38
+
<details>
39
+
<summary>Dica 1 - Configuração</summary>
40
+
Permita arquivos React no tsconfig.json
41
+
42
+
```
43
+
{
44
+
...
45
+
"compilerOptions": {
46
+
...
47
+
"jsx": "react"
48
+
},
49
+
...
50
+
}
51
+
```
52
+
53
+
</details>
54
+
55
+
<details>
56
+
<summary>Dica 2 - Initialização</summary>
57
+
Crie uma raiz react com `createRoot(...)`
58
+
</details>
59
+
60
+
<details>
61
+
<summary>Dica 3 - Visualização</summary>
62
+
Para renderizar o componente, ele deve parecer com:
63
+
```
64
+
<reactroot>.render(
65
+
<React.StrictMode>
66
+
...
67
+
</React.StrictMode>
68
+
)
69
+
```
70
+
71
+
</details>
72
+
73
+
<details>
74
+
<summary>Dica 4 - Design</summary>
75
+
Não esqueça de permitir o arquivo react no Tailwind.
0 commit comments