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?

Why are you trying to load the script dynamically through React anyway? There's no reason to do that. — Mike Cluck
– Mike Cluck, Commented Aug 29, 2017 at 19:13
Well, the simplest answer is I don't really know what I'm doing, and learning as I go ¯_(ツ)_/¯ The real answer is I'm trying to do this on a portfolio website and I'm trying to demonstrate an ability to use jQuery by hosting the app on my site rather than simply including a demonstration and a few pictures. — Daniel Ertel-Moore
– Daniel Ertel-Moore, Commented Aug 29, 2017 at 19:57

Christopher Messer · Accepted Answer · 2017-08-29 19:11:59Z

3

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.

answered Aug 29, 2017 at 19:11

Christopher Messer

2,09011 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Ertel-Moore Over a year ago

Good to know. I'll go about this project in a different way. Thank you for taking the time to spell it out for me.

Collectives™ on Stack Overflow

How do I add a custom script to React component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related