Instala React Js en windows 10

Instala React Js en windows 10

Voy a comenzar una serie de tutoriales para compartir mi aprendizaje personal del framework -sólamente libreria para algunos- de react js. Los conocimientos sobre los que escribiré están orientados a aquellos programadores que no conozcan react o no hayan trabajado nunca en éste entorno.

Mi primer propósito será el de instalar el framework react js en mi ordenador para comenzar a trabajar con él. Este proceso nos llevará unos minutos -dependiendo de la potencia y disponibilidad de recursos de nuestro ordenador-.

Una vez completado, crearé un pequeño programa de prueba para verificar que todo funciona tal y cómo se espera que lo haga.

¿Qué es React Js?

Es una de las framework más populares en la actualidad, creada por Facebook, y cuyo propósito es el de desarrollar de una manera fácil e intuitiva potentes interfaces de usuario.

Puedes crear una interfaz dinámica, muy reactiva a cualquier evento y asíncronas por el servidor, es decir, está basada en la tecnología AJAX.

¿Cómo lo instalo en mi sistema windows 10?

Lo primero que voy a hacer, es instalar nodejs en mi ordenador. Para ello me voy a la página oficial que podéis encontrar en éste enlace.

Al momento de escribir éste artículo, la versión LTS (la recomendada) era la 12.18.4, mientras que la actual iba por la 14.13.0. En todos los tutoriales que he estudiado recomiendan para los iniciados en la programación de react js decantarse por la versión LTS. En mi caso, es lo que hice pero me gustaría conocer la opinión de mis lectores sobre este particular. Animo a que dejéis vuestros comentarios en la sección de comentarios.

Una vez que hemos terminado, a partir de ahora trabajaremos con la consola de comandos de windows.

A continuación instalaremos o actualizaremos el paquete npm, que es el gestor de paquetes de node. Puesto que yo ya lo tengo instalado, lo que haré es actualizar el software a la última versión a través del siguiente comando:

npm install -g npm@latest

Una vez actualizados a la última versión que, actualmente va por la versión 6.14.8. Para comprobar qué versión tienes tu no tienes más que escribir en la consola el comando:

npm --version

Lo siguiente que haremos es borrar la cache de npm. Si no lo hacemos corremos el riesgo de instalar una versión antigua de react js. Lo hacemos con el siguiente comando:

npm cache clear

Ahora toca instalar react js propiamente. Para ello vamos a utilizar un paquete de facebook create-react-app. Pero lo haremos desde la consola. Basicamente ésto es un paquete de consola que nos generará todo lo necesario para nuestro proyecto.

pagina en la que podemos descargar React Js

Esto es lo equivalente a Angular CLI. Para proceder a la instalación escribiremos en la consola de nuestro ordenador la siguiente orden:

npm install -g create-react-app

Nos llevará tiempo que éste proceso termine. A mi me llevó bastante tiempo esperando a que terminara de instalar el proyecto por lo que te recomiendo que te lo tomes con calma.

Una vez que se ha terminado de instalar ya podemos crear un proyecto de prueba para comprobar que todo ha ido bien.

Comprobando que todo ha ido bien

Lo primero es entrar a la carpeta en la que vayas a estar trabajando. En mi caso, trabajo con xampp, así que me dirigiré al directorio htdocs y a la carpeta en la que almacenaré todos mis proyectos.

Para crear mi proyecto de prueba escribiré el siguiente comando:

create-react-app aprendiendoreact

Escribo el directorio en donde quiero que se cree el proyecto en minúsculas por que si lo hago en mayúsculas resultará que te da un error. No se a ciencia cierta el por qué ocurre ésto y espero que alguno de mis seguidores pueda aclararmelo.

pantalla de presentación del proyecto React Js

Después de unos minutos, mi ordenador se lo toma con mucha clama, ya tendrás el proyecto creado. Al final te aparecen en la consola algunas recomendaciones; particularmente la que me interesa es saber como puedo lanzar la aplicación recién creada en uno de mis navegadores.

Para hacerlo tengo que escribir -dentro del nuevo directorio que se ha creado- el siguiente comando:

npm start

En mi caso, automáticamente se me abrió una nueva pestaña en mi navegador en la que aparecía la pantalla que os dejo al inicio de ésta sección con el logo de react.

En caso de que ésto no ocurra, sólo tienes que abrir una pestaña nueva y escribir:

localhost:3000

Con ésto debe aparecerte la pantalla que te he dejado al inicio de ésta última sección del articulo.

Continuaré en próximas publicaciones compartiendo mi aprendizaje de react js con vosotros. Espero vuestras recomendaciones, consejos y aportaciones en la sección de comentarios del blog.

No Comments

Post a Comment