Curso de REACT desde cero

Crea tu primer proyecto con React y Node.JS

Capítulo 2: Crear e iniciar proyecto de React

En este segundo capítulo, te mostraré al grano como tienes que crear e iniciar un proyecto de React en Visual Studio Code.

Crear carpeta de proyecto React

Lo primero es crear una carpeta en el sistema de archivos. Créala donde veas conveniente, esa va a ser la carpeta que contenga todo tu proyecto.

Abre esta carpeta en Visual Studio Code o en otro editor que utilices (el proceso es similar).

Después, abre la consola CMD en Visual Studio.

En el prompt (donde nos deja escribir comandos), tienes que poner el siguiente comando. Este iniciará el proyecto de React con los archivos necesarios.

npx create-react-app .
Crear proyecto React

El punto del final del comando es necesario. Donde está el punto, va la ruta donde queremos iniciar el proyecto React. Un punto es la abreviatura para decirle que queremos la propia ruta en la que estamos, así no hay que indicársela. Si quieres hacer esto con otra carpeta en la que no esté el prompt de la consola, puedes sustituir la ruta por una relativa o absoluta.

Nombres de directorios que no puedes emplear para proyectos React

Hay tres nombres de directorio para proyectos React reservados. Si has tenido la suerte de acertar uno de ellos, enhorabuena, no los puedes usar, sin embargo, habrás descubierto este pequeño easter egg de React (aunque realmente no lo sea, está especificado en la referencia).

Nombres de carpeta reservados React

Eso sí, puedes crear una carpeta con alguno de estos nombres y luego iniciar el proyecto dentro de otra carpeta con un nombre distinto.

Una vez terminado el proceso, tendrás una carpeta repleta de otras carpetas y archivos.

Iniciar el servidor Node.JS

Lo siguiente que haremos, es iniciar el servidor Node.JS, ya que React se ejecuta de lado del servidor y no del cliente.

start react npm

Esto hará que se abra una ventana de tu navegador en tu dirección local (localhost), puerto 3000 con la página de muestra de React.

react página de muestra

¡Perfecto! Ya lo tenemos todo listo para empezar con la creación de aplicaciones web.

Por cierto, cada vez que cierres tu sesión en el equipo, tendrás que volver a utilizar este comando para arrancar el servidor.

Comentarios

Si te quedan dudas sobre el temario, sobre React, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.