¿Cómo instalar React en Windows? La guía completa

ReactJS es una biblioteca de JavaScript gratuita y de código abierto que ha cambiado significativamente las antiguas técnicas de desarrollo de frontend. Hecho público en 2013, React fue un proyecto interno de Facebook. Desde entonces, React ha sido adoptado por varias organizaciones y nuevas empresas. Los desarrolladores frontend con suficiente conocimiento de JavaScript, HTML y CSS pueden crear interfaces de usuario interactivas para aplicaciones web y móviles. Una de las mayores ventajas de ReactJS es su enfoque basado en componentes. La creación de componentes reutilizables encapsulados con su propio estado independiente simplifica las complejas interfaces de usuario.

Curiosamente, todo lo que escribimos en ReactJS puede parecer HTML, pero no lo es. Se conoce como JSX, archivo XML de JavaScript. Este JSX produce "elementos" de React, que se representan en el modelo de objeto del documento. En términos sencillos, JSX nos permite escribir lógica JavaScript dentro del cuerpo HTML. Por lo tanto, hacer que React sea mucho más simple y fácil de entender.

Para hacer su uso ideal, profundicemos para aprender cómo instalar React JS en Windows.

¿Cómo instalar React JS en Windows?

Requisitos del sistema para Windows

Si bien usar ReactJs es bastante sencillo, el proceso de cómo instalar React JS en Windows puede ser bastante tedioso. Dado que ReactJS es un proyecto de código abierto, no es tan simple como descargar software de Internet. En primer lugar, existen algunos requisitos previos para usar ReactJS en su Windows.

1. Versión de Windows: Windows XP, Windows 7 (32/64 bits) o superior.
2. Se requiere un mínimo de 4 GB de RAM.
3. Un mínimo de 10 GB de espacio en disco en su disco duro.
4. Un navegador de Internet como Chrome, Microsoft Edge, Firefox, etc.
5. Un editor para depurar y probar el código escrito en ReactJS.

Aprenda cursos de desarrollo de software en línea de las mejores universidades del mundo. Obtenga Programas PG Ejecutivos, Programas de Certificado Avanzado o Programas de Maestría para acelerar su carrera.

Descarga e instalación de Node.js

Node.js es el servidor que lo ayuda a ejecutar el código ReactJS en su sistema. Al igual que ReactJS, también es de código abierto. El instalador de Node.js incluye NPM (Node Package Manager), que contiene varios módulos de nodo que los desarrolladores usan para alojar y publicar sus propios módulos en comunidades de código abierto. Por lo tanto, el Nodo funciona junto con el registro de NPM, lo que facilita la instalación de cualquier paquete mediante la CLI de NPM. El Nodo envuelve aún más la aplicación ReactJS en un solo paquete web para una fácil instalación.

Este es el procedimiento paso a paso para descargar e instalar Node.js:

1. Para instalar Node.js, vaya a https://nodejs.org/en/ .
2. Dependiendo de la versión de su sistema operativo Windows, debe elegir un instalador adecuado.
3. La página de inicio de Node.js recomienda una versión LTS según su sistema operativo. Al hacer clic en él, se iniciará automáticamente la descarga.
4. Encontrará el instalador en la carpeta de descargas. Ejecute el instalador.
5. Aparecerá un asistente de configuración en la pantalla, que le pedirá el Acuerdo de licencia de usuario final. Acepte los términos y condiciones para continuar con la instalación.
6. Luego, el usuario debe seleccionar una carpeta de destino con la ruta predeterminada del instalador. Haga clic en siguiente para continuar.
7. Luego, el instalador muestra las funciones que se instalarán y también establece las variables de ruta de entorno en el símbolo del sistema. Haga clic en siguiente para comenzar la instalación.
8. Una vez completada la instalación, verifique Node.js en su sistema mediante el símbolo del sistema.
9. Escriba "node -v" en el símbolo del sistema para verificar la versión de Node.js instalada.
10. Escriba "npm -v" en el símbolo del sistema para verificar también la instalación de npm.

Instalando reaccionar

Después de la instalación de Node.js, podemos instalar React JS en Windows usando dos técnicas:

• Usando el paquete web y Babel

1. Crear carpeta raíz

Antes de instalar ReactJS, cree una carpeta raíz con el nombre "reactFile" usando los siguientes comandos en el símbolo del sistema.

C:\Usuarios\nombre de usuario\Escritorio>mkdir reactFile

C:\Usuarios\nombre de usuario\Escritorio>cd reactFile

Después de crear el directorio, genere un archivo package.json con el siguiente comando en el símbolo del sistema. Un archivo package.json ayuda a crear módulos.

C:\Usuarios\nombre de usuario\Escritorio>reactFile> npm init

El símbolo del sistema luego solicita información sobre el módulo; sáltelo seleccionando la opción "-y".

2. Instala React y react-dom

Instale los paquetes React y react-dom usando los siguientes comandos npm y agregue los paquetes al archivo package.json usando el comando "-save".

C:\Usuarios\nombre de usuario\Escritorio>reactFile> npm install reaccionar –guardar

C:\Usuarios\nombre de usuario\Escritorio>reactFile> npm install react-dom –save

Explore nuestros cursos gratuitos de desarrollo de software

3. Instalar paquete web

Instale webpack, webpack-dev-server y webpack-cli usando los siguientes comandos.

C:\Usuarios\nombre de usuario\Escritorio>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Instalar Babel

Babel es un transpilador que convierte el código JavaScript en algo que el navegador entienda. Por lo tanto, es muy importante instalar Babel y sus siguientes complementos, a saber, babel-loader, babel-preset-env, babel-preset-react y html-webpack-plugin.

Use el siguiente comando para instalar todos los complementos de babel a la vez.

C:\Usuarios\nombre de usuario\Escritorio\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Crear archivos ReactJS

Para finalizar el proceso de instalación, debemos crear manualmente ciertos archivos usando el símbolo del sistema.

C:\Usuarios\nombre de usuario\Escritorio\reactFile>escriba nul>index.html

C:\Usuarios\nombre de usuario\Escritorio\reactFile>escriba nul> App.js

C:\Usuarios\nombre de usuario\Escritorio\reactFile>escriba nul>main.js

C:\Usuarios\nombre de usuario\Escritorio\reactFile>escriba nul> webpack.config.js

C:\Usuarios\nombre de usuario\Escritorio\reactFile>tipo nul> .babelrc

6. Compilador de configuración, servidores y cargadores

Una vez que se crean estos archivos ReactJS dentro de la carpeta "reactFile", puede preparar el servidor de implementación configurándolo en el puerto 8001 o cualquier puerto que desee en webpack.-config.js.

Use el siguiente código en el archivo webpack-config.js,

const ruta = require('ruta');

const HtmlWebpackPlugin = require('html-webpack-plugin');

módulo.exportaciones = {

entrada: './main.js',

producción: {

ruta: ruta.join(__dirname, '/paquete'),

nombre de archivo: 'index_bundle.js'

},

servidor de desarrollo: {

en línea: cierto,

puerto: 8001

},

módulo: {

normas: [

{

prueba: /\.jsx?$/,

excluir: /node_modules/,

cargador: 'cargador de babel',

consulta: {

preajustes: ['es2015', 'reaccionar']

}

}

]

},

complementos:[

nuevo HtmlWebpackPlugin({

plantilla: './index.html'

})

]

}

7. Configuración de index.html

Dentro de index.html, escriba un código HTML regular con div id=”app” como elemento raíz y luego agregue el script index_bundle.js en el cuerpo HTML.

Habilidades de desarrollo de software bajo demanda

8. Configuración de App.js y main.js

Escriba el componente React dentro de App.js para representar una clase o función. Inserte el texto que desea representar dentro del componente, que aparecerá en el navegador una vez compilado. Luego, importe el componente a nuestro elemento raíz de la aplicación dentro de main.js para que los resultados aparezcan en el navegador.

Cree un archivo “.babelrc” e inserte las siguientes líneas de código,

{

“preajustes”:[“env”, “reaccionar”]

}

9. Mostrar el contenido en la página web

La configuración finalmente está completa y el servidor estará en funcionamiento una vez que escriba el siguiente comando en el símbolo del sistema.

C:\Usuarios\nombre de usuario\Escritorio\reactFile>npm start

Tan pronto como presione enter, el navegador le mostrará el mensaje que presentó dentro del componente.

• Usando el comando crear-reaccionar-aplicación

1. Instalar crear-reaccionar-aplicación

Abra el símbolo del sistema y escriba el siguiente código para instalar la aplicación create-react.

C:\Usuarios\nombre de usuario\Escritorio>npx create-react-app my-app

Este comando instala todos los archivos y carpetas necesarios dentro de la carpeta "mi aplicación" de su escritorio. Esta línea de código finaliza la instalación de React en su sistema en unos minutos.

2. Ejecute el servidor

Vaya al símbolo del sistema y escriba

C:\Usuarios\nombre de usuario\Escritorio>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

Su proyecto React está funcionando en su navegador con la ayuda de localhost, que aloja su proyecto en el puerto disponible.

Explore nuestros cursos populares de ingeniería de software

Conclusión

ReactJS ha cambiado el juego de desarrollo frontend desde su lanzamiento y se ha convertido en una de las bibliotecas JavaScript de código abierto más populares. Varias empresas, como Meta, Netflix y Slack, utilizan ReactJS. Una de las mayores ventajas es la reutilización de los componentes para generar cambios en la página web. Varias aplicaciones de React se implementan en Azure Web App mediante Azure DevOps. Esta es una de las habilidades más buscadas en la industria de TI ahora.

Si es un desarrollador de React, puede mejorar su conjunto de habilidades conociendo Azure DevOps a través del Programa de certificado avanzado de upGrad en DevOps de IIIT Bangalore . El curso ofrece más de 250 horas de módulos de aprendizaje junto con una guía de preparación para entrevistas. También podrá asistir a sesiones de tutoría profesional con expertos en DevOps que pueden brindarle una hoja de ruta clara de lo que espera la industria. ¡Recibe un certificado y el estado de ex alumno de IIITB al final del curso, lo que lo convierte en una adición excepcional a su currículum!