Ejecutar aplicaciones React localmente
- Ejecute aplicaciones React localmente con una sola página HTML
-
Ejecute aplicaciones React localmente con
create-react-app
La ejecución local de aplicaciones React puede ser una oportunidad invaluable para practicar sus habilidades de desarrollo web. Le permiten concentrarse en escribir código en lugar de una configuración que requiere mucho tiempo, como configurar Webpack, Babbel y otras herramientas necesarias.
Ejecute aplicaciones React localmente con una sola página HTML
Los docs oficiales de React le brindan un archivo HTML listo para ejecutar para ejecutar React localmente. Todo lo que necesita hacer es descargar el archivo HTML, abrirlo con su editor de código, realizar los cambios necesarios y luego abrir el archivo en su navegador.
Este archivo HTML tiene las secciones <head> y <body>. En el primero, importamos React usando un enlace CDN, y el segundo contiene un <div> con el atributo id root.
Luego, tenemos una etiqueta de apertura y cierre <script>, que nos permite ejecutar JavaScript en el archivo HTML. Aquí, usamos el método document.getElementById() para hacer referencia al elemento DOM y el método ReactDOM.createRoot() para iniciar React para este contenedor específico.
Finalmente, usamos el método render() para ejecutar nuestro componente en el archivo HTML.
Ejecute aplicaciones React localmente con create-react-app
Facebook, la organización que desarrolla y mantiene la biblioteca React, creó un paquete create-react-app. Le permite crear una SPA (aplicación de una sola página) con solo unos pocos comandos npm.
Establece un entorno casi ideal para crear aplicaciones en React. Se configurará el proyecto, incluidos compiladores, transpiladores y herramientas como Webpack.
Estas herramientas son necesarias y le permiten utilizar funciones avanzadas de React, como el lenguaje de plantillas JSX. También es necesario utilizar las últimas funciones de JavaScript, como desestructuración, funciones de flecha, etc.
Permite a los desarrolladores de React centrarse en aprender código en lugar de configurar el entorno. Para crear el proyecto, busque cualquier carpeta en la que desee crear un directorio para almacenar los archivos necesarios.
Luego, abra el símbolo del sistema y navegue a esa carpeta (usando el comando cd en Windows). Use este comando para crear el proyecto:
npx create-react-app app-name
Aquí, npx create-react-app es el comando, y la última parte es el nombre que elige para su aplicación React.
Luego, muévase a la carpeta del proyecto recién creado con este comando:
cd app-name
Finalmente, puede usar este comando para iniciar la vista previa en vivo de su componente:
npm start
Normalmente, los archivos JavaScript se ubicarán en la carpeta src del proyecto. El archivo App.js es el archivo del componente principal predeterminado, pero puede crear otros archivos para cada componente nuevo.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn