Utilisez un composant REACT dans un site jquery

Bonjour,

J'ai un site ne jquery et j'ai besoin d'utiliser un composant en REACT.

Je connais bien jquery mais pas du tout REACT

Est ce que je peux intégrer un composant REACT dans un site en Jquery ?

Merci pour vos retours
Sylo

Bonjour,
Si vous n'utilisez pas JSX, vous pouvez simplement le faire en suivant ce tutoriel:
Tutoriel
Traduction

J'ai crée une page rapidement qui applique le tutoriel en question:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
 
 
</head>
<body>
 
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
 
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
 
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 
<!-- Load our React component. -->
<script src="like_button.js"></script>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';
 
const e = React.createElement;
 
class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }
 
    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }
 
        return e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
        );
    }
}
 
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Merci pour votre réponse détaillé.
Je regarde cela en détail mais il semble que cela soit ce dont j'ai besoin.
Sylo