Cómo crear una aplicación React.js en macOS

7 ott 2022 2 min di lettura
Cómo crear una aplicación React.js en macOS
Indice dei contenuti

Introducción

Los desarrolladores han utilizado ampliamente React para crear interfaces de usuario y componentes interactivos en sus aplicaciones. La biblioteca React también es una excelente opción cuando desea crear aplicaciones rápidas y escalables con un enfoque basado en componentes. Si aún no ha comenzado a usarlo, es hora de que comience a aprender. En este artículo de blog, le mostraremos cómo configurar un entorno de desarrollo React en su computadora Mac. ¡Siga leyendo!

requisitos previos

Primero, debe asegurarse de tener la última versión de macOS instalada en su computadora. Puede verificar la versión de su macOS haciendo clic en el menú Apple en la esquina superior izquierda de la pantalla de su computadora y haciendo clic en " Acerca de esta Mac ". Asegúrese de tener Node.js instalado en su computadora Mac. Puede descargar Node.js para MacOS.

También necesita instalar un entorno de desarrollo integrado (IDE) para escribir su aplicación React. Las opciones más populares son WebStorm, Visual Studio Code, Atom e IntelliJ. Usaremos WebStorm para este tutorial. Deberá registrarse para obtener una prueba gratuita para comenzar a usar este IDE.

Instalar Node.js y NPM

Primero, debe instalar Node.js y NPM en su computadora Mac. Para hacer esto, vaya a la terminal, escriba el siguiente comando y presione enter. Puede encontrar el terminal buscando "terminal" en el menú de búsqueda de MacOS.

nvm install 16

Suponiendo que ya tiene NVM instalado en su sistema macOS.

Instale el módulo create-react-app con NPM

Después de instalar Node.js y NPM, puede continuar e instalar React CLI escribiendo el siguiente comando en la terminal. También puede instalarlo desde el sitio web de NPM haciendo clic en el botón "Instalar":

npm install create-react-app --location=global

Cree la aplicación React en macOS

Si desea crear su aplicación React desde cero, siga los pasos a continuación. Primero, cambie la ruta del directorio actual al directorio raíz de su computadora escribiendo el siguiente comando.

También puede cambiar la ruta del directorio a cualquier otra carpeta. Pero asegúrese de elegir una ruta que no esté presente en ningún repositorio de git. Si la ruta de la carpeta existe en cualquier repositorio de Git, recibirá un mensaje que indica que la ruta está en el archivo .gitignore y no se puede seleccionar.

Ahora cree una nueva aplicación React escribiendo el siguiente comando:

npx create-react-app my-app

A continuación, puede navegar por el proyecto desde la línea de comandos e iniciarlo con npm:

cd my-app
npm start

Espere a que se inicie la aplicación.

La aplicación predeterminada escuchará en localhost:3000. Puede acceder desde un navegador web.

Safari es el navegador predeterminado para la máquina macOS, pero también te recomiendo que uses Chrome. Google Chrome proporciona el entorno de desarrollo y una extensión de Chrome para React Developer Tools.

Crea la aplicación React

Una vez que la aplicación React esté lista para la producción, puede continuar y compilarla. Escriba el siguiente comando para crear su aplicación.

npm run build

El comando anterior crea su aplicación React y crea una carpeta llamada "compilar" en el directorio actual. La carpeta de compilación contiene código JavaScript y otros recursos requeridos por la aplicación.

Puede cargar archivos desde la carpeta de compilación a la raíz del documento de su sitio de producción.

Conclusión

Ahora que sabe cómo configurar un entorno de desarrollo de React en su computadora Mac, puede continuar y comenzar a aprender los conceptos básicos de React. Recomendamos comenzar con el tutorial de React para comprender bien cómo funciona React. También puede consultar la documentación oficial de React para obtener más información sobre la biblioteca.

Support us with a

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.