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 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:
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. Otherwise, I will try to comment the code as much as possible.
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:
and this is what you should see if you add this as a
script tag to an
Once we restart our server, and refresh the browser page, this is what we should see:
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.
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
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
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.
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:
This is what our app should look like now:
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 👨🏿💻