score:2

A dependency is something that is imported in the src/ or client/ module like you mentioned. The code that you run depends on it and hence is required in the production bundle.

If it were something like Babel it could be a devDependency because:

  1. It is not imported in source code.
  2. It is a transpiler and works on code in compile time

But that is not the case with React. Functions like setState or lifecycle hooks are being executed in run time, meaning the library has to be present during run time.

React could very well be listed as a peer dependency is some of the popuar libraries. This is because we assume that all projects that are going to use this library are going to have React installed. Like consider the case of react-bootstrap. It can only be run in react projects, so we include react as peer dependency reducing the overhead of installing it.

If you need a framework that would disappear in compile time, take a look at Svelte.

score:6

I had the same question and found this article that explains it well.

To summarize, it shouldn't matter where you put the react dependencies since Webpack will bundle them into a self-contained file and the code will run fine in either case. However, separating development and production dependencies allows for a better communication to other developers for the purpose of these dependencies.

score:13

dependencies are required to run, devDependencies only to develop, e.g.: unit tests, Coffeescript to Javascript transpilation, minification, ...

React is a dependency because it is included in the final build.

In case of a React App, all your JSX is converted to a syntax similar to React.createElement and hence you would require your App to have React during run time as well. Similary methods like setState and lifecyle functions are all executed during run-time.

As a matter of fact react is a library that has exposed some methods and APIs to access and manipulate DOM.

Consider this similar to jquery or express where you add it in the production build because they are being used during run time.

When creating a react app, things like babel, webpack etc which are only used to create a bundle would be dev-dependencies as once the packaged bundle is generated it need not be generated during run time of application


Related Query

More Query from same tag