跳转到内容
angular challenges logo Angular Challenges

🔴 React in angular

挑战 #45

此内容尚不支持你的语言。

创建者 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.

贡献者

感谢所有帮助本文档变得更好的贡献者!

  • wandri
  • tomalaforge
  • jdegand
  • LMFinney