@@ -43,4 +43,4 @@ We want to get rid of the ng-container by writing :
The list is empty !!
```
-The goal is to **improve the ngFor directive**
+The goal is to **improve the ngFor directive**.
diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
index 43f8a2d..88d4e5b 100644
--- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
+++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
@@ -17,9 +17,9 @@ However the context of **NgTemplateOutlet** type is **Object**. But with the hel
## Statement
-In this exercice, we want to learn how to strongly type our ng-template in our AppComponent.
+In this exercise, we want to learn how to strongly type our ng-template in our AppComponent.
-This exercice has two levels of complexity.
+This exercise has two levels of complexity.
### Level 1: known Interface
diff --git a/docs/src/content/docs/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
new file mode 100644
index 0000000..3c56d88
--- /dev/null
+++ b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
@@ -0,0 +1,77 @@
+---
+title: 🔴 React in angular
+description: Challenge 45 is about learning how to benefit from the numerous libraries in React
+author: wandrille-guesdon
+challengeNumber: 45
+command: angular-react-in-angular
+sidebar:
+ order: 209
+ badge: New
+---
+
+The goal of this challenge is to use a React component inside an Angular application.
+
+Many components are available in React, and it can be interesting to use them in an Angular application. The goal is to create a React component and use it in an Angular application.
+
+## Information
+
+In this challenge, we have a simple application and a React component `ReactPost` in `app/react` to illustrate a React component from a library.
+
+## Statement
+
+- Your task is to display the posts with the React component `ReactPost`.
+- When you select a post, the post should be highlighted.
+
+In order to play with the React component, you should start by installing the React dependencies.
+
+```bash
+npm i --save react react-dom
+npm i --save-dev @types/react @types/react-dom
+```
+
+## Constraints
+
+- Do not transform the React component into an Angular component. The React component is pretty simple and can be written with ease in Angular. But **the goal is to use the React component**.
+
+### Hint
+
+
+ Hint 1 - Configuration
+ Allow the React files in tsconfig.json
+
+```
+{
+...
+"compilerOptions": {
+ ...
+ "jsx": "react"
+},
+...
+}
+```
+
+
+
+
+ Hint 2 - Initialization
+ Create a react root with `createRoot(...)`
+
+
+
+ Hint 3 - Display
+ To render the component, it should look like this:
+
+ ```
+ .render(
+
+ ...
+
+ )
+ ```
+
+
+
+
+ Hint 4 - Design
+ Do not forget to allow the react file in Tailwind.
+
diff --git a/docs/src/content/docs/challenges/angular/5-crud.md b/docs/src/content/docs/challenges/angular/5-crud.md
index dfc909f..9d34d5a 100644
--- a/docs/src/content/docs/challenges/angular/5-crud.md
+++ b/docs/src/content/docs/challenges/angular/5-crud.md
@@ -14,7 +14,7 @@ Communicating and having a global/local state in sync with your backend is the h
## Statement
-In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
+In this exercise, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
Currently we have a working example but filled with lots of bad practices.
diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md
index 58620cb..e6871a4 100644
--- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md
+++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md
@@ -9,14 +9,27 @@ sidebar:
order: 3
---
-The goal of this series of 3 pipe challenges is to master **pipe** in Angular.
-
-Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.
-
## Information
-In this first exercice, you call a simple function inside your template. The goal is to convert it to a pipe.
+This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
+
+Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.
+
+Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance.
+
+By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders.
+
+:::note
+A **pure** pipe is only called when the value changes.\
+A **impure** pipe is called every change detection cycle.
+:::
+
+There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
+
+## Statement
+
+In this exercise, you need to refactor a transform function inside a component, which is called inside your template. The goal is to convert this function to a pipe.
## Constraints
-- must be strongly typed
+- Must be strongly typed
diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
index a50aa09..4d75ef1 100644
--- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
+++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
@@ -9,15 +9,28 @@ sidebar:
order: 103
---
-The goal of this series of 3 pipe challenges is to master **pipe** in Angular.
+## Information
-Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.
+This is the second of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
-## Information:
+Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.
-In this second exercice, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome.
+Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance.
+
+By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders.
+
+:::note
+A **pure** pipe is only called when the value changes.\
+A **impure** pipe is called every change detection cycle.
+:::
+
+There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
+
+## Statement
+
+In this exercise, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome.
The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. **`WrapFn` must be highly reusable.**
## Constraints:
-- must be strongly typed
+- Must be strongly typed
diff --git a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
index f571bbf..ea7914b 100644
--- a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
+++ b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
@@ -9,7 +9,7 @@ sidebar:
order: 113
---
-For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
+For this exercise, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
## Information
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 7185c30..b9a5715 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Go to the latest Challenge
- link: /challenges/angular/44-view-transition/
+ link: /challenges/angular/45-react-in-angular/
icon: rocket
- text: Give a star
link: https://github.com/tomalaforge/angular-challenges
diff --git a/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
new file mode 100644
index 0000000..808f997
--- /dev/null
+++ b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
@@ -0,0 +1,46 @@
+---
+title: 🟠 Aprimoramento de Diretiva
+description: Desafio 3 é sobre o aprimoramento de uma diretiva nativa
+author: thomas-laforge
+challengeNumber: 3
+command: angular-ngfor-enhancement
+blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
+sidebar:
+ order: 101
+---
+
+:::note[Nota]
+Este exercício pode ser obsoleto com o novo controle de fluxo e do bloco de empty state dentro do bloco `@for`. No entanto, **diretivas estruturais** não serão removidas tão cedo, por isso você ainda pode aprender bastante com este exercício.
+:::
+
+## Informação
+
+Diretiva é uma ferramente poderosa oferecida pelo framework Angular. Você pode usar o princípio DRY compartilhando a lógica dentro de uma diretiva e aplicando ela em qualquer componente que quiser.
+
+Mas a verdadeira vantagem é que você consegue melhorar uma diretiva pré-existente que não **pertence** a você.
+
+## Declaração
+
+Neste exercício, queremos mostrar uma lista de pessoas. Se a lista está vazio, você deve mostrar _" the list is empty !! "_.
+
+Atualmente, temos:
+
+```typescript
+
+
+ {{ person.name }}
+
+
+
The list is empty !!
+```
+
+Queremos nos livrar do `ng-container` escrevendo:
+
+```typescript
+
+ {{ person.name }}
+
+
The list is empty !!
+```
+
+Objetivo é **melhorar a diretiva ngFor**.
diff --git a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
index 7391bb4..ead29d4 100644
--- a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
+++ b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
@@ -6,7 +6,6 @@ challengeNumber: 44
command: angular-view-transition
sidebar:
order: 208
- badge: New
---
## Informação
