How to use CDN Links in React JS?
Last Updated :
24 Apr, 2025
React is integrated in the projects using package managers like npm or yarn. However, there are some cases where using Content Delivery Network (CDN) links can be a advantage, especially for quick prototypes, or when integrating React into existing projects.
The two libraries imported CDN Links are discussed below
Prerequisites
In this article, we are going to learn how we can use CDN links in React JS. CDN links stand for Content Delivery Network Links. These links are used to connect CSS frameworks or scripts; basically, already-written code can be connected through these links.
Steps to Create Project
Step 1: Create a React App via following command.
npx create-react-app name
Step 2: Move to root directory.
cd name
Project Structure
Approach 1: Importing Bootstrap using CDN
Bootstrap is a CSS-based framework that is used to connect Bootstrap CSS using CDN (Content Delivery Network). We can connect it through CDN. The CDN link is always added to the public folder where the index.html file is present.
CDN Link:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
Example: Implementation of above approach.
JavaScript
// App.js
import './App.css';
function App() {
return(
<h1 className="text-center bg-primary p-4">GeeksforGeeks</h1>
)
}
export default App;
<!-- Index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest"
href="%PUBLIC_URL%/manifest.json" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>