web-dev-qa-db-fra.com

Comment inclure des bibliothèques js tierces dans l'application React

Je suis nouveau dans React et je recherche l'équivalent React de cette approche JQuery pour inclure l'analyse dans toute mon application.

Typiquement je voudrais:

  1. Incluez la bibliothèque tierce sur les pages html. Assez facile à mettre sur la page index.html mais je ne sais pas si c'est la meilleure pratique.

    <script src="http://path/to/script/utag.js" />

  2. Ensuite, je peux interagir avec la bibliothèque tant qu'elle est chargée, ce que je peux vérifier à l'aide de JQuery window.load. Ce script fonctionnera bien sur une page HTML simple, mais j'essaie de trouver le meilleur moyen équivalent de le faire dans mon application de réaction. Je ne veux pas introduire jquery et actuellement mon conteneur React me dira qu'utag n'est pas défini si j'essaie de référencer utag dans une fonction. 

    <script> $(window).load(function() { utag.link({ "event_name" : "locale_select", "language" : utag_data.language, "currency" : utag_data.currency } ); }); </script>

Je suis nouveau pour réagir, alors toute aide serait la bienvenue. Je sais que mon projet n'utilise pas Webpack, il utilise react-scripts et a été lancé à l'aide de l'utilitaire create-react-app.

javascriptreactjscreate-react-app
6
user1521567
import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}

Il est important de comprendre la déclaration à l'intérieur du composant proposé ci-dessus. componentDidMount() est une méthode de cycle de vie appelée automatiquement après le rendu du composant à l'écran. Ensuite, à l'intérieur, vous appelez votre someLibrary (). En fonction du type de bibliothèque tierce dont vous parlez, il sera dicté ce que vous devrez peut-être également transmettre à someLibrary ().

C’est ainsi que Reactjs interagit avec les bibliothèques tierces, car en règle générale, les bibliothèques tierces ne savent pas comment faire partie d’un écosystème React. Ils n'ont aucune idée de ce qu'est une méthode render() ou de ce qu'est JSX. C'est donc la manière générale de faire en sorte que les bibliothèques tierces fonctionnent correctement avec React.

2
Daniel

Si vous utilisez create-react-app, alors webpack est utilisé pour regrouper votre javascript. Voici la documentation sur l'installation de dépendances avec create-react-app.

Pour inclure votre bibliothèque, vous devez l'installer en tant que paquet npm}, et l'importer dans le fichier où vous souhaitez l'utiliser. Webpack l'inclura dans la liasse et tout devrait fonctionner. 

Donc, installez la bibliothèque avec npm install some-library. Importez-le dans un fichier et appelez-le depuis un composant:

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}
1
elas

Selon ce problème sur GitHub si vous utilisez create-react-app, si vous souhaitez utiliser des variables globales importées ou créées dans votre fichier index.html dans votre script react, vous devez utiliser window.variable_name.

Dans votre cas, cela fonctionnera probablement

import React from "react"
class App extends React.Component {
    componentDidMount() {
        window.utag.link({ "event_name" : "locale_select", "language" : 
    window.utag_data.language, "currency" : window.utag_data.currency } );
    }

    render() {
        return <div />;
    }
}
1
Mohammad Mahmoudi