How to include third-party js libraries in a React application

Question

I am new to React and looking for the React equivalent of this jQuery approach, including analytics throughout my application.

Normally I would:

• Include a third-party library on html pages. It's easy enough to put index.html on the page, but I don't know if this is best practice.

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

• Then I can interact with the library as long as it loads, and I can check it with jQuery window.load. This script will work fine on a simple html page, but I'm trying to find an equivalent best practice method in this application. I don't want to inject jquery, and currently my React container will tell me that utag is not defined if I try to reference utagin a function.

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

React, . , webpack, create-react-app.

Answer 1

create-react-app, webpack javascript. create-react-app.

, npm , . Webpack , .

, npm install some-library. :

import someLibrary from 'some-library';

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

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

Answer 2

import someLibrary from 'some-library';

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

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

, . componentDidMount() - , , . someLibrary(). , , , , someLibrary().

Reactjs , , React. , render() JSX. , React.