Primeros pasos
Last updated
Last updated
Aunque existen varias formas de empezar con React, quizá la forma más fácil es con , una aplicación de consola que nos va a permitir crear una aplicación en React rápidamente.
El primer paso es crear nuestra aplicación utilizando y el comando seguido del nombre que le quieras dar. Por ejemplo:
Cuando ejecutas ese comando va a crear una carpeta llama my-app con una serie de archivos y subcarpetas para que puedas empezar a trabajar en tu proyecto.
Ingresa a la carpeta my-app y ejecuta el proyecto con los siguientes comandos:
El último comando ejecuta el servidor de desarrollo y abre un navegador con una pantalla de bienvenida.
Felicitaciones, has creado tu primera aplicación con React!
Un proyecto creado con incluye, además de React, otras librerías como:
que se encarga de procesar y empaquetar nuestro código JavaScript (con sus dependencias), archivos CSS y otros archivos estáticos como imágenes y fuentes.
que nos permite usar nuevas características de ECMAScript y JSX (JavaScript XML).
que es una librería para el procesamiento de CSS.
que es una librería para testing.
... entre otras.
Uno podría configurar un proyecto de React manualmente e incluir cada una de estas librerías, pero es bastante engorroso, nos hace la vida más fácil.
Los dos archivos más importantes son:
public/index.html - la plantilla de la aplicación
src/index.js - el punto de entrada de JavaScript
Puedes eliminar o renombrar otros archivos según tus necesidades.
Dentro de src se incluyen todos los archivos JavaScript y CSS de tu aplicación. También es recomendable incluir otros archivos estáticos como imágenes y fuentes en esta carpeta. Puedes crear subcarpetas para organizar mejor los archivos.
En public van todos los archivos estáticos que necesites incluir en la plantilla public/index.html.
Puedes crear otras carpetas además de src y public. Estas carpetas no van a ser incluídas en el paquete de distribución.
En la carpeta del proyecto puedes ejecutar los siguientes comandos:
npm start - inicia el servidor de desarrollo y abre un navegador con la aplicación.
npm test - ejecuta las pruebas.
npm run build - empaqueta la aplicación para producción en la carpeta build.
crea la siguiente estructura de archivos y carpetas:
npm run eject - permite cambiar manualmente las librerías y configuración que utiliza por defecto. Ten cuidado con este comando, una vez lo ejecutas no hay marcha atrás.
Una de las funcionalidades más importantes de los proyectos creados con es la capacidad de hacer cambios en caliente sin necesidad de reiniciar el servidor. Si haces un cambio en algún archivo en src o public el navegador se refresca automáticamente.