How to import from React-Select CDN with React and Babel ?
Last Updated :
23 Jul, 2025
In ReactJS, import from React-Select CDN is not done in a simple way as we do with the npm packages. To use them we need to use directly them in the HTML file. It does not work with the project set-up by creating a react app.
Prerequisites:
Steps to Import React-Select CDN with React and Babel:
Step 1: Create index.html with HTML boilerplate having required HTML tags.
Step 2: Add below CND links in the Head Tag to Import the React-Select, React and Babel in the application
CDN Links: To import and use React-Select with CDN with React and Babel we will take an HTML file including all the CDN links given below:
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-select.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
Step 3: Add the react code in the script tag and start using the application.
Project Structure:
folder structureExample: This example uses CDN links to import the React-Select with React and Babel in the html file.
index.html
<!-- Filename - index.html -->
<html>
<head>
<meta charset="utf-8">
<!-- CDN for React and React-DOM-->
<script src=
"https://unpkg.com/[email protected]/umd/react.production.min.js">
</script>
<script src=
"https://unpkg.com/[email protected]/umd/react-dom.production.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/emotion.umd.min.js">
</script>
<script src=
"https://unpkg.com/[email protected]/prop-types.min.js">
</script>
<script src=
"https://unpkg.com/[email protected]/dist/react-input-autosize.min.js">
</script>
<!-- CDN for React-Select-->
<script src=
"https://unpkg.com/[email protected]/dist/react-select.min.js">
</script>
<!-- CDN for Babel-->
<script src=
"https://unpkg.com/[email protected]/babel.min.js">
</script>
<!-- Link Stylesheet -->
<link rel="stylesheet" href="./index.css">
<title>React Select CDN with React and Babel</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
{/* React Code */}
const options = [
{ value: 'Jan', label: 'Jan' },
{ value: 'Feb', label: 'Feb' },
{ value: 'Mar', label: 'Mar' }
];
class App extends React.Component {
state = {
option: null,
}
fun = (option) => {
this.setState({ option });
}
render() {
const { option } = this.state;
return (
<div class="container">
Select the one
<Select
value={option}
onChange={this.fun}
options={options}
/>
<div class="small">Option selected: </div>
{option && option.label}
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#root"))
</script>
</body>
</html>
/* Filename - index.css */
.container
{
width: 40%;
margin: 0 auto;
}
.small
{
margin: 20px;
}
Step to run the application: Open the HTML file in the browser or if having a lite server open it.
Output: Here, we are able to use the react-select with the CDN link.
import from React-Select CDN with React and Babel
Similar Reads
How to Use react-select in React Application? React Select is a flexible and handy dropdown library for React that handles multi-select, loading data asynchronously, custom options, and more in your components with ease. In this article, we will see how to use react-select in React Application. PrerequisiteNode.js installednpm or yarn package m
2 min read
How to Import a Specific Component from React Bootstrap ? In this article, we are going to learn about how to import a specific component from React-Bootstrap into your project. React Bootstrap is one of the most popular libraries used for application styling. It has various components embedded in it, which makes the behavior of the application more attrac
4 min read
How to Migrate from create-react-app to Vite? In this article, we will learn how we can migrate from create-react-app to Vite. Vite is a build tool for frontend development that aims for fast and efficient development. It provides a development server with hot module replacement and supports various JavaScript flavors, including JSX, out of the
3 min read
How to Set Selected Option of a Select in React? In the React setting the selected option of a Select can be achieved using different approaches including using the native HTML <select> element and using third-party select components like react-select. We will discuss two approaches to Setting selected options of a select in React: Table of
3 min read
How to Migrate from Create React App to Next JS ? Migrating from Create React App to Next.js is a structured process that includes setting up a Next.js project, reorganizing your files, updating dependencies, and utilizing Next.js features for better performance and server-side rendering.Prerequisites:NPM & Node.jsReact JSNext JSApproach To mig
2 min read
How to setup Tailwind 3 in React with CRA 5 ? In this article, we will see how to set up Tailwind 3 in React with CRA 5, but before that, we need some basic ideas about these technologies. React JS: A free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook.TailwindCSS: A high
3 min read