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>
Output:
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;
<!-- 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:
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.
Similar Reads
How to use Link Component in React JS?
Material-UI provides a set of components that can be seamlessly integrated with React to create visually appealing and functional navigation elements. The Link component allows you to easily customize anchor elements with our own theme colors and typography styles. Material UI for React has this com
2 min read
How to use React Icons in Next.js ?
Icons make the website beautiful and interactive. Icons are an important part of a website's user interfaces, which are used in expressing objects, actions, and ideas. They are used to communicate the core idea and intent of a product or action and express the object visually. Here, we will learn to
3 min read
How to use Bootstrap Icons in React ?
React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. It’s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to
2 min read
How to use innerHtml in React JS ?
React.js provides a easy way of handling UI updates. However, sometimes you need to inject HTML directly into your components. PrerequisitesIntroduction to ReactReact ComponentsReact HooksNPM or NPXIn this article, we are going to learn how can we use InnerHTML in React JS. We can add HTML into Reac
2 min read
How to use Portal Component in ReactJS ?
The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMat
2 min read
How to add Web Share in Next.js ?
The Web Share API enables web applications to share content (like URLs, text, or files) to other apps installed on a user's device, such as social media platforms, messaging apps, or email clients. Integrating the Web Share API into a Next.js project enhances user experience by providing a seamless
2 min read
How to use files in public folder in ReactJS ?
In React, the files store public folder contains static files such as index.html, javascript library files, images, and other assets, etc. which you don't want to be processed by Webpack. Files in this folder are copied and pasted as they are directly into the build folder. Files inside the `public`
2 min read
How to Insert an Iframe in React ?
In this article, we are going to insert an Iframe in React JS. The iframe stands for the inline frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another do
1 min read
How to create Header in React JS ?
The Header is an important element of a website’s design. It's the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI. Prerequisites:NPM & Nod
3 min read
How to write ReactJS Code in Codepen.IO ?
Now everything is online, some people use VScode to write react.js code and face most of the difficulty. The VScode requires setting for writing React.js code and Many beginners faced difficulty to use VScode so, for them, it is good and easy to use codepen. The codepen provide you with an online pl
2 min read