React-Scripts comienzan en React

La construcción de una aplicación React desde cero es técnicamente posible, pero debe crear todos los archivos y ajustar la configuración, lo que puede llevar mucho tiempo. Entonces, en su lugar, puede usar create-react-app, que proporciona un entorno amigable para desarrollar su aplicación React. También incluye scripts y configuraciones que puede usar para iniciar el servidor de desarrollo, habilitar la recarga en caliente y otras características esenciales.

react-scripts en create-react-app

La instalación del paquete create-react-app le permite configurar una aplicación React completamente capaz con un solo comando. Como desarrollador, solo tiene que escribir npm run start en la línea de comandos para crear una aplicación en vivo en su servidor localhost. La configuración básica de create-react-app también incluye un conjunto completo de scripts necesarios para ejecutar una aplicación. Está configurado de esta manera para ahorrarles a los principiantes la molestia de configurar los proyectos ellos mismos. Sin embargo, react-scripts se puede personalizar en el archivo package.json.

react-scripts start

Para ejecutar este script, ejecute npm run start en su línea de comando. También puede utilizar el comando abreviado npm start. Le dice a create-react-app que configure un entorno de desarrollo, inicie un servidor local y recargue un módulo en caliente.

Su archivo package.json debe incluir un objeto scripts, con pares clave-valor que hagan referencia al nombre del script y una referencia para la ejecución. Esta es simplemente una manera más fácil de decirle a React que ejecute el comando npm-run-all -p watch-css start-js, que realiza múltiples acciones. En este caso, npm run start desencadena la ejecución de dos scripts: watch-css y start-js. El primero garantiza que los archivos .scss se traduzcan a archivos .css normales y que los cambios de estilo se reflejen automáticamente en su aplicación. Este último le dice a React que configure la aplicación en modo de desarrollo y use localhost:3000 para alojarla.

Personalización

npm start es simplemente un comando. Puede personalizar sus acciones si es necesario. Por ejemplo, puede configurar el puerto localhost para alojar la aplicación. He aquí un ejemplo:

'scripts': {
  'start': 'set PORT=8000 && react-scripts start',
  'build': 'react-scripts build',
  'test': 'react-scripts test',
  'eject': 'react-scripts eject'
}

Aquí le decimos explícitamente al script que use el puerto localhost:8000 en lugar del puerto predeterminado.

También puede ejecutar otros scripts ingresando npm run scriptName en la línea de comando. Si está ejecutando una aplicación create-react-app y no puede averiguar qué hace un script, busque en el archivo package.json.