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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js” integrity= “sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL” crossorigin=”anonymous”></script>
Example: Implementation of above approach.
Javascript
// App.jsimport './App.css';function App() { return( <h1 className="text-center bg-primary p-4">w3wiki</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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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:
How to use CDN Links in React JS?
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