Introducción a create-react-app

create-react-app es la forma más fácil de iniciar una aplicación React

create-react-appes un proyecto destinado a ponerte al día con React en poco tiempo. Proporciona un iniciador de aplicaciones React listo para usar, para que pueda sumergirse en la construcción de su aplicación sin tener que lidiar con las configuraciones de Webpack y Babel.

Proporciona fuera de la caja:

  • un servidor de desarrollo con recarga en caliente
  • proporciona un entorno de prueba con Jest
  • permite construir la aplicación React
  • listo para la sintaxis ES6 +
  • agrupa todos sus activos y JavaScript
  • viene con autoprefixer CSS, compatibilidad con módulos SASS y CSS
  • ¡y más!

Empiezas por usarnpx, que es una forma fácil de descargar y ejecutar comandos de Node.js sin instalarlos.npxviene connpm(desde la versión 5.2) y si aún no tiene npm instalado, hágalo ahora desdehttps://nodejs.org(npm se instala con Node).

Si no está seguro de qué versión tiene, le recomiendo que consulte si necesita actualizar.

Consejo: echa un vistazo a mi tutorial de terminal enhttps://flaviocopes.com/macos-terminal/si no estás familiarizado con él

Cuando corresnpx create-react-app <app-name>,npxva adescargarel más recientecreate-react-appsuelte, ejecútelo y luego elimínelo de su sistema. Esto es genial porque nunca tendrá una versión desactualizada en su sistema, y cada vez que lo ejecute, obtendrá el último y mejor código disponible.

Empecemos entonces:

npx create-react-app todolist

Aquí es cuando terminó de ejecutarse:

create-react-appcreó una estructura de archivos en la carpeta que le dijo (todolisten este caso), e inicializó unGitrepositorio.

También agregó algunos comandos en elpackage.jsonarchivo, para que pueda iniciar la aplicación inmediatamente yendo a la carpeta y ejecutandonpm start.

Además denpm start,create-react-appagregó algunos otros comandos:

  • npm run build: para construir los archivos de la aplicación React en elbuildcarpeta, lista para ser implementada en un servidor
  • npm test: para ejecutar la suite de pruebas usandoBroma
  • npm eject: para expulsar decreate-react-app

Expulsar es el acto de decidir quecreate-react-appha hecho lo suficiente por ti, pero quieres hacer más de lo que te permite.

Ya quecreate-react-appes un conjunto de convenciones de denominador común y una cantidad limitada de opciones, de alguna manera está garantizado que en algún momento sus necesidades requerirán algo único que supere las capacidades decreate-react-app.

Cuando expulsa, pierde la capacidad de las actualizaciones automáticas, pero gana más flexibilidad en laBabelyWebpackconfiguración.

Cuando expulsa la acción es irreversible. Obtendrá 2 carpetas nuevas en el directorio de su aplicación,configyscripts. Estos contienen toda la configuración que necesita y ahora puede comenzar a editarla.

Descarga mi gratisReact Handbook


Más tutoriales de react: