Utilisez un composant REACT dans un site jquery

**olysmar2** · 27/02/2021, 23h56

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

**Lucio_** · 06/03/2021, 11h54

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

**olysmar2** · 09/03/2021, 12h56

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

Utilisez un composant REACT dans un site jquery

React

Discussions similaires

Partager

Partager