Saltar al contenido
MundoCursos

¿Cómo instalar React?

¿Necesitas saber cómo instalar React? ¡Has llegado al lugar adecuado! Te vamos a explicar de manera sencilla cómo tienes que hacer la instalación de esta bibilioteca de código abierto de JavaScript.

¿Cómo instalar React paso a paso y crear un proyecto?

Quizá te imponga un poco de respeto, pero el proceso es mucho más sencillo y fácil de seguir de lo que puedas imaginar. ¿Estás listo?

1. Haz unas comprobaciones iniciales

Necesitas asegurarte de que tienes instalados tanto el programa Node.js como el sistema de gestión de paquetes npm. No solo eso, sino que también es necesario que dispongas de versiones determinadas de estas herramientas.

En el caso de npm, debe ser a partir de la 6.0, mientras que de Node.js necesitas tener instalada, como mínimo, la versión 8.10.

Para ello, usa los códigos  node –v y npm –v en shell. Así sabrás si están instalados y qué versión.

En el caso de no tener Node.js, solo tendrás que entrar en su web oficial en la dirección nodejs.org y seguir los pasos.

¿Te gustaría aumentar tus conocimientos en React?

Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.

Sin embargo, si quieres acelerar tu aprendizaje, te recomendamos ver esta guía con los mejores cursos de React. Los hemos seleccionado y analizado minuciosamente para ayudarte a elegir el ideal.

2. Utiliza npx para la instalación de create-react-app

Lo que tienes que hacer ahora es usar npx y el paquete create-react-app. El uso de npx tiene mucho sentido porque te facilita la instalación de paquetes de gran volumen sin que tengan que pasar por una instalación global, lo que aumentará la fluidez.

Utiliza npx para la instalación de create-react-app

El uso de create-react-app está habilitado directamente por parte de los creadores de react, que han conseguido con este paquete simplificar la ejecución de proyectos de react. Con este paquete ya se da una estructura preparada y eso simplifica el proceso.

3. Ejecuta la instalación

Abre la terminal de shell en el sistema operativo que tengas y escribe el comando:

npx create-react-app nombredelaapp
Ejecutar comando "npx create-react-app"
React instalado

4. Procede a ejecutar react.js

El comando anterior ha sido el que ha creado la aplicación. Por ello, el siguiente paso es incluso más sencillo y ya requiere solo de cargar la app. Para ello, desde la terminal, muévete hasta la carpeta donde esté el proyecto y utiliza el comando “npm start”.

Hazlo de la siguiente manera:

cd nombredelaapp (para ir al directorio)

y luego:

npm start
Ejecutar comando react "npm start"

Eso hará que se abra un navegador apuntando a la ruta http://localhost:3000 que incluirá tu template inicial y la capacidad para comenzar a trabajar en su edición.

5. Pon la app en producción

Si ya tienes la app lista, lo que tendrás que ejecutar será el comando “npm run build” y eso generará la compilación de la app dentro de la carpeta “build”.

Poner app en producción con el comando "npm run build"

Preguntas frecuentes sobre cómo instalar React

Hay ciertas dudas que son bastante habituales y que vamos a proceder a responder a continuación:

¿Y si se produce un error en el proceso de instalación?

Normalmente, no es el caso. De todas maneras, es posible que te encuentres con un error que se deba a que no has habilitado la ejecución de scripts en tu sistema.

Si eso es lo que te ocurre, la solución es fácil. Busca “Windows Powershell” en tu equipo. Pulsa el botón derecho del ratón para que aparezca el menú desplegable. Ahí tienes que elegir “ejecutar como administrador”.

¿Y si se produce un error en el proceso de instalación?

Ahora escribe el código “Set-ExecutionPolicy Unrestricted” sin las comillas. Pulsa aceptar y luego teclea “S” para confirmar. Con eso ya evitarás el mencionado error.

Escribe el comando "Set-ExecutionPolicy Unrestricted"

¿Cómo actualizar npm si no tienes la versión adecuada?

Antes te decíamos que necesitas una edición actual para que el proceso funcione. Por lo tanto, es posible que tengas que actualizar.

Para ello, el comando que tienes que introducir en la consola es el siguiente:

npm install –g npm@latest

¿Cómo llevar a cabo el borrado de la cache de npm?

Posiblemente lo necesites si te encuentras con dificultades.

En este caso, el comando que tienes que introducir en la consola de sistema es este:

npm cache clean –force

Con eso estarás forzando que se haga el borrado de la memoria cache.

¿Cómo ver cuál es la versión de React que tienes instalada?

Este es un dato que encontrarás en uno de los ficheros que tendrás en tu equipo: package.json.