How to Include External Libraries Using CDN in React
CDN, short for content delivery network, is helpful, as it can make thousands of packages available in your application within a second. You can think of CDN links as an excellent way to quickly set up a JavaScript environment with top-level React API.
This article will discuss including external libraries using CDN links and the pros and cons of using CDNs in React.
Include External Libraries Using CDN in React
When building applications in React, most likely, you’re going to use many different packages. React library alone allows you to build beautiful and dynamic user interfaces, but it lacks some essential functionalities of a full-fledged framework, such as navigation.
To develop a fully functioning application, you must include other libraries, such as react-router.
For instance, lodash is a package that includes many different JavaScript utilities for web applications. To have it in our web application, we must find the CDN link and put it in our React project’s root index.html file.
Let’s look at an example.
<head>
.....
<script src="https://unpkg.com/lodash" async></script>
</head>
In HTML, the <script> element embeds and makes JavaScript code available within the application’s structure. Once we do this, the lodash package becomes available on the global window namespace.
Then you can access the package and its methods through the window object.
import "./styles.css";
export default function App() {
console.log(window._.random(1, 10));
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
We do not import any package directly in the file in this situation. Still, we can access the .random() method from the lodash package, often referred to as _.
This is only possible because our App component is ultimately rendered in the main HTML file, where we included the CDN link between the <head> tags.
If you check out the code on CodeSandbox, you’ll see that every time we reload the application, the method logs a random number between 1 and 10. So, it works as it should.
Alternative: Install Dependencies Using npm
As previously mentioned, CDN links are handy to quickly set up an environment and work with packages without delay. However, if you’re building a serious application, you should install dependencies using npm instead.
However, npm requires import statements to include packages in each project file. You will need a module bundler-like web pack to use import statements.
To understand module bundlers, loaders, and how the import statements are transpiled, go through the official webpack guide.
When starting a project, make sure to include all packages either using CDN links or installing them through npm. Mixing the two approaches will make it challenging to keep track of all the dependencies used in your application.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn