En ReactJs , la importación desde React-Select CDN no se realiza de forma sencilla como lo hacemos con los paquetes npm. Para usarlos necesitamos usarlos directamente en el archivo HTML. No funciona con la configuración del proyecto al crear la aplicación de reacción.
Enlaces de CDN: para importar y usar React-Select con CDN con React y Babel, tomaremos un archivo HTML que incluye todos los enlaces de CDN que se indican a continuación:
<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>
Ejemplo: El siguiente ejemplo cubre cómo importar desde React-Select CDN con React y Babel.
Configuración del proyecto: cree una carpeta llamada ejemplo y muévase dentro de esa carpeta y cree los archivos index.html e index.css. La estructura del proyecto se verá así.
estructura de carpetas
index.html
<html>
<head>
<meta charset="utf-8">
<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>
<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">
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>
index.css: agregue estos estilos en el archivo CSS.
index.css
/* Write CSS Here */
.container
{
width: 40%;
margin: 0 auto;
}
.small
{
margin: 20px;
}
Paso para ejecutar la aplicación: Abra el archivo HTML en el navegador o si tiene un servidor lite, ábralo.
Salida: aquí, podemos usar la selección de reacción con el enlace CDN.
importar desde React-Select CDN con React y Babel