What exactly is the ‘react-scripts start’ command?

create-react-app and react-scripts

react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.

react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.

with create-react-app you have following features out of the box.

  • React, JSX, ES6, and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
  • Hassle-free updates for the above tools with a single dependency.

npm scripts

npm start is a shortcut for npm run start.

npm run is used to run scripts that you define in the scripts object of your package.json

if there is no start key in the scripts object, it will default to node server.js

Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a “managed” state into a not managed state, where you have full control over dependencies, build scripts and other configurations.

Related Posts:

  1. What does this “react-scripts eject” command do?
  2. How To Add My Own Svg Image Just Like Logo Is Shown By Default In Create-React-App
  3. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  4. How to fix missing dependency warning when using useEffect React Hook
  5. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  6. What is localhost 3000?
  7. What is localhost 3000?
  8. MenuIcon not found in material-ui/icons
  9. Error : Cannot read property ‘map’ of undefined
  10. Error : Cannot read property ‘map’ of undefined
  11. Difference between npx and npm?
  12. When to use componentWillReceiveProps lifecycle method?
  13. How do I reference a local image in React?
  14. What is mapDispatchToProps?
  15. How to use clsx in React
  16. How to use clsx in React
  17. NPM Start not starting local server
  18. how to delete a single item using axios in react
  19. how to render a react component using ReactDOM Render
  20. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  21. After $npm install, Getting Error: Cannot find module ‘../lib/utils/unsupported.js’
  22. Console.log() isn’t logging in ReactJS
  23. Reactjs this.setState is not a function error
  24. Axios having CORS issue
  25. When to use React setState callback
  26. Adding an .env file to React Project
  27. react-scripts: command not found
  28. Component definition is missing display name react/display-name
  29. What is withRouter for in react-router-dom?
  30. How to include bootstrap css and js in reactjs app?
  31. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  32. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  33. React – expressions must have one parent element?
  34. Can you force a React component to rerender without calling setState?
  35. Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
  36. Is using async componentDidMount() good?
  37. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  38. Inserting the iframe into react component
  39. Cannot find module ‘@babel/core’
  40. How to use callback with useState hook in react
  41. How to use callback with useState hook in react
  42. How to resolve “Cannot use import statement outside a module” in jest
  43. How to use switch statement inside a React component?
  44. How to use onClick event on react Link component?
  45. forEach() in React JSX does not output any HTML
  46. Scroll to the top of the page after render in react.js
  47. What does “isomorphic React” mean?
  48. axios post request to send form data
  49. Trying to use fetch and pass in mode: no-cors
  50. How to declare a global variable in React?
  51. How to use onload in react?
  52. Local package.json exists, but node_modules missing
  53. Why am I getting Warning: Functions are not valid as a React child?
  54. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  55. What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
  56. webpackJsonp is not defined
  57. How to set a default value in react-select
  58. Invalid Host Header when ngrok tries to connect to React dev server
  59. ReactNative: how to center text?
  60. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  61. Invariant Violation: Could not find “store” in either the context or props of “Connect(SportsDatabase)”
  62. react-router vs react-router-dom, when to use one or the other?
  63. React Props is Not Defined
  64. ReactJs CreateClass is not a function
  65. onKeyDown event not working on divs in React
  66. React.createElement: type is invalid — expected a string
  67. Read the current full URL with React?
  68. ‘React’ must be in scope when using JSX react/react-in-jsx-scope?
  69. Show or hide element in React
  70. React statics with ES6 classes
  71. componentDidMount() not being called when react component is mounted
  72. where is create-react-app webpack config and files?
  73. How can I update npm itself?
  74. What is the difference between React Native and React?
  75. How to do a redirect to another route with react-router?
  76. Jest spy on functionality
  77. Understanding React-Redux and mapStateToProps()
  78. nodemon not found in npm
  79. Setting onSubmit in React.js
  80. ReactJS: setTimeout() not working?
  81. React Uncaught Error: Target container is not a DOM element [duplicate]
  82. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  83. How to implement authenticated routes in React Router 4?
  84. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  85. How to make a sticky footer in react?
  86. setInterval in a React app
  87. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  88. ReactJS: setTimeout() not working?
  89. How to install npm peer dependencies automatically?
  90. How to Reinstall Broken npm
  91. Cannot npm install due to node-gyp: binding.gyp not found
  92. Downgrade npm to an older version
  93. npm install resulting in ‘ENOENT: no such file or directory’
  94. Cannot read property ‘getHostNode’ of null
  95. Render HTML string as real HTML in a React component
  96. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  97. Npm Error – Windows NT – How to resolve
  98. npm update check failed
  99. How do I install Angular 2 using NPM?
  100. how to update npm on macOS

Leave a Comment