How do I add a custom script to React component?

Question

Long story short: I'm trying to add a front-end app to my portfolio site that uses React. I would like to integrate the app into the component as it renders. What I have setup right now is:

React component:

class Giphy extends Component {
    constructor(props) {
        super(props);
        this.state = {src: 1}

        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(event) {
        this.setState({src: event.target.value})
    }
    componentDidMount() {
        const script = document.createElement("script");

        script.type = "text/javascript";
        script.src = "/scripts/giphyLogic.js";

        document.body.appendChild(script);
    }

...and a bunch of stuff in the render() method that doesn't matter

the script that I want to load involves a bunch of jQuery and simple JS stuff.

function displayButtons() {
    $("#buttons").empty();

    for (i=0; i<buttonArray.length; i++){
        var a = $("<button type='button' class='btn btn-info'>");
        var btnID = buttonArray[i].replace(/\s+/g, "+")
        a.attr("id", btnID);
        a.text(buttonArray[i]);
        $("#buttons").append(a);
    }
}

$("#addButton").on("click", function() {
    var newButton = $(".form-control").val();
    buttonArray.push(newButton);
    displayButtons();

})

function displayGIFs() {
    $(".btn-info").on("click", function() {
        $("#resultsContainer").empty();
        var subject = $(this).attr("id");
        var giphyURL = "http://api.giphy.com/v1/gifs/search?q=" + subject + "&api_key=dc6zaTOxFJmzC";

        $.ajax({ url: giphyURL, method: "GET"}).done(function(res) {
            for (t=0; t<25; t++) {
                var rating = res.data[t].rating; 
                var image = $("<img>");

                var imgURLmoving = res.data[t].images.fixed_height.url;
                var imgURLstill = res.data[t].images.fixed_height_still.url;

                image.attr("src", imgURLstill);
                image.attr("data-still", imgURLstill);
                image.attr("data-moving", imgURLmoving);
                image.attr("data-state", "still")
                image.addClass("gif");

                $("#resultsContainer").append("<p>" + rating + "</p");
                $("#resultsContainer").append(image);
            }
        })
        $(document.body).on("click", ".gif", function() {
            var state = $(this).attr("data-state");
            if (state === "still") {
                $(this).attr("src", $(this).data("moving"));
                $(this).attr("data-state", "moving");
            } else {
                $(this).attr("src", $(this).data("still"));
                $(this).attr("data-state", "still");
            }
        })
    })
}
displayButtons();
displayGIFs();

This all works on a standalone HTML document, but I can't seem to get the script to work properly. When the component loads and I inspect the page,

<script type="text/javascript" src="/scripts/giphyLogic.js"></script>

is there under the bundle.js script tag, but nothing from the script happens.

I get an "Uncaught SyntaxError: Unexpected token <" error that is attributed to giphyLogic.js:1 even though in the actual .js file, that line is blank. I've looked around, and this apparently happens when a file is included that doesn't exist, but the file is definitely there. I've double checked the path (by including an image in the same folder and loading the image successfully on the page) and it's correct.

Is there a way to resolve this, or am I going to have to create methods within the React component that I'm creating?

Answer 1

Do not mix jQuery and react. Learn how to use react properly by reading the well-written documentation. They can guide you through the many examples to get a simple app up and running.

Once again, do NOT use jQuery and react. jQuery wants to manually manipulate the DOM, and react manages a virtual DOM. The two will conflict more often than not, and you're going to have a bad time. If you have a very deep understanding of react, there are very few scenarios in which you could maybe use some jQuery, but nearly all of the time, it is to be avoided at all costs.

Obviously things like $.ajax() are fine, but for anything dealing with DOM manipulation, stay away. And if you only end up using jQuery for $.ajax() calls... you should switch to a leaner library like axios or use the native fetch API.