package.json Explained for React Beginners

package.json Explained for React Beginners

Every React project has a package.json at its root. It looks like a config file, but it is really the manifest of your project. Understanding it makes React development far less mysterious.

name and version

These identify your project. The name must be lowercase and URL-safe. The version follows semantic versioning. These matter most if you publish your project as a package.

scripts

The scripts section defines command shortcuts. When you run npm start or npm run build, npm looks here. Your dev server, build, lint, and test commands all live in scripts.

dependencies

These are packages your app needs to run, like react and react-dom. Running npm install installs everything listed here into node_modules.

devDependencies

These are packages needed only during development, like Parcel, Babel, ESLint, and testing tools. They are not shipped to production, which keeps your production bundle smaller.

The Engines Field

This declares which Node.js version your project expects. It prevents contributors from using an incompatible Node version that breaks the build.

The Lockfile

package.json lists ranges; package-lock.json records the exact installed versions. Together they guarantee reproducible installs across machines.

What Beginners Get Wrong

They edit package.json manually to add dependencies instead of using npm install, which forgets to update the lockfile. Use npm install packageName so both files stay in sync.

The Takeaway

package.json declares what your project is, what it needs, and how to run it. Once you understand name, scripts, dependencies, and devDependencies, the file stops being intimidating.