Skip to content

Commit cce27da

Browse files
authored
Merge pull request #604 from kabrunko-dev/docs/translate-challenge-45
docs(pt): translate challenge 45
2 parents d41feb1 + 80420ee commit cce27da

1 file changed

Lines changed: 76 additions & 0 deletions

File tree

45-react-in-angular.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: 🔴 React em angular
3+
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+
<react root>.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.
76+
</details>

0 commit comments

Comments
 (0)