Dynamically Appending a script tag in a React App
Tags: react, express, html
Published: 2019-12-21 16:17:05

---
title: Dynamically Appending a script tag in a React App
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/11lfcb02pcj8ubbz8ds7.png
description: Learn how to dynamically use a script tag in your React App
tags: react, express, html
---

These days most libraries have a special/custom React component you can simply insert into your `jsx` code, then add some props and it works. What if you face a situation where you really need to use a library but they do not have any React specific support? 

I was attempting to use the Paypal Checkout API to allow my client to make online payment. This API allows me as a developer to move all payment responsibilities to Paypal via their checkout widget. See [docs](https://developer.paypal.com/docs/checkout/) for more details. 

However, there is no strict React support. What they provide in the documentation is a `script` tag that you can drop somewhere in your `html` and the buttons would appear. My app in this case was a React application and my template is `jsx` instead of `html`. How would I handle a case like this? 

I am writing this article to mirror that case with a simple example and show you one way you can handle it. 

First of all lets simulate the situation with Paypal. Paypal provides us with a `script` tag such as this: `<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>`. if you copy the url, it will take you to a blank page with a lot of text. This text is the javascript code. What we need is a server to send us some javascript code. 

The fastest way I know to do this is with `node js` and `Express js`. Lets start by creating a folder for our application and initiating a `package.json`. This can all be done in our terminal.

```
# create a new directory
mkdir script-link

# navigate to the new directory
cd script-link

# initiate a package.json
npm init -y
```

Next lets install `Express js`, then create a file `index.js` to write our server code in. Again, all can be done via the terminal.

```
# install express js
npm i -S express

# create a index.js file
touch index.js
```

Now that we have our file open, lets start our server at port `3001`. If you are unfamiliar with how this is done. check out the [Express js documentation](https://expressjs.com/en/starter/hello-world.html). Otherwise, I will try to comment the code as much as possible. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/skxrd21q42vz3gd3mxmo.png)

to start our application, all we need to do is run `node index.js`. Now lets go to our browser and navigate to `http://localhost:3001/`. This is what we should see on the screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vsiznkp7dhjqia8877ls.PNG)

We are almost there! Now we need to send some javascript code instead. This is the time to think about what we want our mini widget to do. To make it simple all it will do is create a button that will show an alert anytime it is clicked. This is what the code looks like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0f0z4v3p65q0drijmmry.png)

and this is what you should see if you add this as a `script` tag to an `html` file:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t8x09d3i0lugrwxbth8e.gif)

Now that we have that, lets make our server send the code if a request is made. We do this by specifying the type of response file we are sending and by sending our javascript code in the form of a string. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u57obwmokfaey3hmgx3z.png)

Once we restart our server, and refresh the browser page, this is what we should see:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3u3i8qhgjwkje89d5uk4.gif)

OK! we are now sending javascript code just like the Paypal API does. Lets now start a React application that can use this little widget. 

First lets start a React application via the terminal.

```
npx create-react-app some-react-app
```

Once the app is setup we can run it by typing `npm start` in our terminal. This will show us the default React page we are all familiar with. Next lets change the code in the `App.js` file and add our own. All I did was add a `h1` tag with some text.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6y20gz8hj6j4jbgxt58c.png)

In order to use the code that is in our server, we need to have a `script` tag. One method we can use is putting the `script` tag in our `index.html` that is in our public folder. However, lets say the javascript code has some function that we want to invoke at a particular point, how would we do that? For maximum control the best choice is to somehow add the code in a React component. 

Since the `script` tag is just an `html` tag we can simply append it to a tag in our template/jsx. 

First lets create a `div` tag that we can use as a ref to append to. We do this because this is `jsx` not `html`, so we can't simply select the `div` the way you would normally do. We have to create an instance of it via React ref.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5n7kuh6p6xvfbg1hpurv.png)

Finally we use the `useEffect` hook to make sure we run the code when all components have been rendered. inside our `useEffect` hook we create a `script` tag, give it a `src` attribute with our express server link, and append the `script` tag to our `div` instance. This is what it looks like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z4lpf8mcycf9xddefbnb.png)

This is what our app should look like now: 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ax2o4753aqvor1tw6wnf.gif)

Nice! We have successfully dynamically appended a `script` tag in our React application. Now, if we wanted, we could take this code and put it into a separate component. This will allow us to re-use it anywhere in our app. 

This is a simple demo but can give you an idea of how some of those great and convenient custom React components, that many libraries provide, are created. In addition, the idea of appending a `script` tag is new to me and I wanted to document and share it.

Please leave a comment if you have any take on this!

Ok! Now back to learning 👨🏿‍💻