Skip to content
angular challenges logo Angular Challenges

๐Ÿ”ด React in angular

Challenge #45

Created by Wandrille Guesdon

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.

Terminal window
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:
```
<react root>.render(
<React.StrictMode>
...
</React.StrictMode>
)
```
Hint 4 - Design Do not forget to allow the react file in Tailwind.

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • wandri
  • tomalaforge
  • jdegand