How to import from React-Select CDN with React and Babel ?
Last Updated :
17 Nov, 2023
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/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Step 3: Add the react code in the script tag and start using the application.
Project Structure:
folder structure
Example: This example uses CDN links to import the React-Select with React and Babel in the html file.
index.html
<html>
<head>
<meta charset="utf-8">
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<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>
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...