How to import from React-Select CDN with React and Babel ?
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
Last Updated :
17 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...