Básicamente, estoy comenzando con React y estoy siguiendo este tutorial https://reactjs.org/docs/hello-world.html y la Guía de inicio de React https://reactjs.org/docs/add-react- a-un-sitio-web.html .
Mi plantilla ahora se ve así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root') ); </script> </body> </html>Esto funciona, pero algunos paquetes que me gustaría probar no tienen CDN para cargarlos. Específicamente https://www.draftail.org/docs/getting-started .
¿Tengo que configurar un entorno de nodo a continuación con npm init -y y luego npm install --save draftail draft-js@0.10.5 react react-dom ? Pero ya tengo una instalación de reacción a través de la CDN, entonces, ¿qué debo hacer ahora? No tengo idea de si estos paquetes entrarán en conflicto o no.
¿Cómo puedo traer algo instalado en node_modules al navegador en este momento junto con los archivos CSS?
Si el paquete no existe en un formato para el consumo inmediato del navegador, el enfoque correcto es compilar su aplicación desde Node para que pueda importar el paquete y usarlo.
Deberá eliminar todas estas etiquetas de script:
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root') ); </script>En su lugar, una vez que su proyecto Node esté configurado, use el script de salida incluido de Webpack (o cualquier paquete que esté usando) y alójelo en su sitio. Probablemente se verá algo en la línea de
<script src="bundle.js"></script>La transición a un proyecto basado en nodos también tiene otros beneficios:
Tenga en cuenta que create-react-app es una gran plantilla de inicio para un proyecto React: simplemente instálela y no tendrá que meterse con gran parte de la configuración, podrá comenzar a escribir el código que desea .