IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Utilisez un composant REACT dans un site jquery


Sujet :

React

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    avril 2014
    Messages
    199
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : avril 2014
    Messages : 199
    Points : 67
    Points
    67
    Par défaut 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

  2. #2
    Membre habitué
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    août 2007
    Messages
    76
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : août 2007
    Messages : 76
    Points : 139
    Points
    139
    Par défaut
    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);

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    avril 2014
    Messages
    199
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : avril 2014
    Messages : 199
    Points : 67
    Points
    67
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utiliser du javascript dans un composant React
    Par Kagami dans le forum React
    Réponses: 2
    Dernier message: 28/12/2019, 19h21
  2. Réponses: 8
    Dernier message: 27/06/2011, 00h18
  3. [RAVE]Composant RTF dans une feuille RAVE ?
    Par hpalpha dans le forum Rave
    Réponses: 3
    Dernier message: 29/03/2004, 19h25
  4. Réponses: 6
    Dernier message: 23/09/2003, 19h12
  5. [] [Réseau] Renommer des fichiers dans un site FTP
    Par JerBi dans le forum VB 6 et antérieur
    Réponses: 10
    Dernier message: 22/08/2003, 00h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo