Using componentDidMount()

import React, {Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
    componentDidMount() {
        const script = document.createElement("script");
        script.async = true;
        script.src = "https://some-scripturl.js";
        this.div.appendChild(script);
    }
    render() {
        return ( <
            div className = "App"
            ref = {
                el => (this.div = el)
            } > < h1 > Hello react < /h1> {
                /* Script is inserted here */ } <
            /div>
        );
    }
}

export default App;

Using react-helmet

React helmet is an npm library that manages browser head manager, It is very easy to change web page lines of code inside a head tag. First, install react-helmet with the npm install command

npm install react-helmet

It adds the dependency to package.json

"dependencies": {
        "react-helmet": "^6.1.0",
}

Complete component code to add a script tag to component using react-helmet.

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

class AddingScriptExample extends Component {


    render() {
        return (
            <div className="application">
                <Helmet>
                    <script src="https://use.typekit.net/hello.js" type="text/javascript" />
                </Helmet>
            ...
            </div>
        );
    }
}
export default AddingScriptExample;