Tenemos que instalar NodeJS si no está instalado aun. La instalación es muy sencilla. Fijate acá: https://nodejs.org/es/.
Estas extensiones para vscode son todas opcionales pero muy útiles que podemos instalar.
dbaeumer.vscode-eslint: extensión que reconoce los errores más comunes en javascript (y también ReactJS) y nos subraya el código con un interlineado amarillo o rojo a medida que codeamos.esbenp.prettier-vscodeextensión que se encarga de autoformatear el código usando reglas de estilo estándarres cada vez que usamos la combinación de teclasctrl+shift+f.
Seguimos los mismos pasos que están en la guiá oficial: https://create-react-app.dev/docs/getting-started
- Decidir el nombre de la app (el nombre es lo que determina el nombre del
directorio donde va a vivir el código fuente). Por ejemplo
reemplazar_esto_con_el_nombre_de_mi_app. - Abrir un terminal.
- Usando el comando
cdpararce en la carpeta en donde usualmente guardamos el código ( ejemplocd reemplazar_esto_con_la_ruta_a_mis_proyectos) y una vez ahí, correr los siguientes comandos en orden uno por uno:
npx create-react-app reemplazar_esto_con_el_nombre_de_mi_app
cd reemplazar_esto_con_el_nombre_de_mi_app
npm start
Tip opcional: Podés automatizar todo el proceso concatenando todo con &&
en una sola linea. Copiar, pegar (reemplazar) y darle Enter:
npx create-react-app reemplazar_esto_con_el_nombre_de_mi_app && cd reemplazar_esto_con_el_nombre_de_mi_app && npm start- Instalé
create-react-appen mi sistema. - Cree una app react dentro de
reemplazar_esto_con_el_nombre_de_mi_app. - Inicialicé un proyecto GIT con un único commit con el mensaje
Initialize project using Create React App. - Instalé las dependencias necesarias.
- Creé un servidor de desarrollo en el puerto
3000que sirve la aplicación. - Disparé la compilación necesaria para ReactJS.
- Abrí mi navegador para ver el resultado que se está sirviendo en el puerto
3000.
Ya tenemos una app react corriendo, con todo el entorno de desarrollo y manejado
por GIT. Ahora solo queda abrir VSCode en la carpeta del proyecto. Abrimos un
terminal nuevo o un nuevo tab (el anterior ahora está ocupado) y corremos el
comando code . dentro de la carpeta de la app react.
Ahora que nuestra app ya está creada, la próxima vez que querramos continuar codeando en nuestra app, no será necesario correr otra vez todos los comandos de instalación:
cd reemplazar_esto_con_el_nombre_de_mi_app
npm startTener en cuenta que el terminal que usamos para iniciar el proyecto quedará ocupado corriendo el compiladoer de react y observando los cambios en el código y refrescando el navegador cada vez que hagamos cambios en el código.
Muchas veces vamos a ver los error directamente en el navegador y después de corregirlos, todo vuelve a la normalidad. Pero puede que también haya ocasiones en las que notamos que nuestros cambios no se están viendo reflejados en en navegador ni tampoco vemos mensajes de error. En esos casos, es muy provable que podamos ver un error en el terminal que está corriendo el compiladoer y no en el navegador.
Habrá ocasiones en que vamos a necesitar reiniciar la compilación "apagando" el
compilador y corriendo npm start otra vez. Por ejemplo:
- El compilador se quedó colgado mostrando un error que en realidad ya no existe.
- Por alguna razón el compilador se colgó y ya no re-compila nuestros cambios a pesar de que ya arreglamos los errores.
Si después de apagar el compilador y correr npm start el error sigue
suscediendo entonces es provable que aun tengamos un error en nuestro código y
que tengamos que identificarlo y resolverlo antes de intentar re-iniciar de
nuevo.
Si te trabaste en algún lado, tenés dudas, consultas, o crees que podemos mejorar esta guía desde tu punto de vista, abrí un nuevo issue en este repositorio y expresate. Tu inquietud puede ayudar a otros.