From 8bb6ab1414ed876aeb75a538d567e794ff589e32 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Sun, 18 Feb 2024 22:08:52 -0300 Subject: [PATCH 1/2] docs(pt): translate challenge 45 --- 45-react-in-angular.md | 76 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 45-react-in-angular.md diff --git a/45-react-in-angular.md b/45-react-in-angular.md new file mode 100644 index 0000000..8969124 --- /dev/null +++ b/45-react-in-angular.md @@ -0,0 +1,76 @@ +--- +title: 🔴 React em angular +description: Desafio 5 é sobre aprender como se beneficiar das vários bibliotecas em React +author: wandrille-guesdon +challengeNumber: 45 +command: angular-react-in-angular +sidebar: + order: 209 + badge: New +--- + +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. + +```bash +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. +
From 80420ee1bae427fcd530cb3756b6aabbe60cc3b9 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Sun, 18 Feb 2024 22:10:23 -0300 Subject: [PATCH 2/2] docs(pt): fix typo --- 45-react-in-angular.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/45-react-in-angular.md b/45-react-in-angular.md index 8969124..4a07c96 100644 --- a/45-react-in-angular.md +++ b/45-react-in-angular.md @@ -1,6 +1,6 @@ --- title: 🔴 React em angular -description: Desafio 5 é sobre aprender como se beneficiar das vários bibliotecas em React +description: Desafio 5 é sobre aprender como se beneficiar das várias bibliotecas em React author: wandrille-guesdon challengeNumber: 45 command: angular-react-in-angular