How to use CDN Links in React JS?

Last Updated : 28 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

Table of Content

Importing Bootstrap using CDN
Importing Tailwind using CDN

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

Screenshot-2023-11-28-095830

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;

HTML

<!-- 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>

Output:

Screenshot-2023-11-28-101222

Approach 2: Importing Tailwind using CDN

Tailwind CSS is also a framework of CSS that is used to implement CSS. Instead of writing CSS, we can directly apply class names to the React component. Tailwind provides a CDN (Content Delivery Network) link through which we can connect Tailwind CSS to our program.

CDN Link:

<script src="https://cdn.tailwindcss.com"></script>

Example: Implementation of above Tailwind approach.

JavaScript

// App.js
import './App.css';
function App() {
   return(
    <h1 className="text-center bg-primary p-4 text-white">GeeksforGeeks</h1>
   )
}
export default App;

HTML

<!-- 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" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

Output:

Screenshot-2023-11-28-103222

Conclusion

Using CDN links in React gives quick and convenient way to integrate React into your projects without the need for a package manager. It's mostly useful for small projects, or when creating quick prototyping. However, for production-grade applications, consider using package managers for better dependency management and version control.