Before creating and running a modern React development project, you will commonly need Node.js and a package manager such as npm. Node.js provides a JavaScript runtime outside the browser, while npm is commonly used to install and manage JavaScript packages.
Node.js is a JavaScript runtime that allows JavaScript code to run outside a web browser.
JavaScript
↓
Node.js Runtime
↓
Computer
Node.js is commonly used for development tools, servers, command-line programs, and JavaScript-based tooling.
React code is ultimately used to build browser-based user interfaces, but React development projects commonly use Node.js-based tools during development.
Node.js
↓
Package Manager
↓
React Project Tools
↓
Development
↓
React Application
npm is a package manager commonly used with Node.js. It can install packages, manage project dependencies, and run commands defined by a project's configuration.
Node.js
+
npm
↓
JavaScript Project
Node.js provides the runtime, while npm is commonly used to manage JavaScript packages and project commands.
Node.js
├── JavaScript Runtime
│
└── npm
├── Install Packages
├── Manage Dependencies
└── Run Scripts
After installing Node.js, you can check the installed version from a terminal.
node --version
If Node.js is installed correctly, the command displays a version number.
You can also check the npm version using the terminal.
npm --version
A version number indicates that npm is available from your command line.
Node.js can be downloaded from the official Node.js website.
Visit the Node.js download page and choose the installer appropriate for your operating system.
Official Website
↓
Download Node.js
↓
Choose Operating System
↓
Install
On Windows, Node.js can be installed using the Windows installer provided by the Node.js project.
Windows
↓
Node.js Installer
↓
Installation
↓
Command Prompt / PowerShell
↓
node --version
Node.js can also be installed on macOS using an appropriate installer or other supported installation methods.
macOS
↓
Install Node.js
↓
Terminal
↓
node --version
Node.js can be installed on Linux using installation methods appropriate for the particular Linux distribution.
Linux
↓
Install Node.js
↓
Terminal
↓
node --version
Installation commands can differ between Linux distributions.
On systems using an installer, the installation process normally provides a series of setup screens.
Installer
↓
License
↓
Installation Location
↓
Features
↓
Install
↓
Finish
During installation, Node.js files are placed in an installation directory selected by the installer.
For most beginners, the default installation location is suitable unless there is a specific reason to change it.
The operating system uses the PATH environment variable to locate executable programs from the command line.
Terminal
↓
node --version
↓
PATH
↓
Node.js Executable
A correctly configured PATH allows commands such as
node and npm to be used from the terminal.
On Windows, you can use Command Prompt or PowerShell to execute Node.js commands.
Windows
↓
Command Prompt / PowerShell
↓
node --version
On macOS and Linux, the Terminal application can be used to execute Node.js and npm commands.
Terminal
↓
node --version
npm --version
After installation, open a new terminal and run:
node --version
You should see the installed Node.js version.
vXX.XX.X
The exact version displayed depends on the version installed on your computer.
Run the following command:
npm --version
If npm is correctly available, the terminal will display its version number.
You can test Node.js by creating a JavaScript file.
console.log("Hello Node.js");
Save the file as test.js and run:
node test.js
The terminal should display:
Hello Node.js
Before creating a React project, you can create or choose a folder where your projects will be stored.
mkdir react-projects
cd react-projects
The exact commands can vary depending on your operating system and terminal.
npm can download and manage packages required by a JavaScript project.
npm install package-name
The package information is recorded in the project's package configuration.
A JavaScript project commonly contains a
package.json file. It stores project information,
scripts, and dependency declarations.
{
"name": "my-react-app",
"scripts": {},
"dependencies": {}
}
When packages are installed, their files are commonly stored in a
node_modules directory.
Project
|
+-- package.json
|
+-- node_modules/
|
+-- src/
This directory can contain many files because packages may have their own dependencies.
Projects can define commands in the scripts section of
package.json.
{
"scripts": {
"dev": "..."
}
}
The command can then be executed using:
npm run dev
Node.js is not a web browser. It provides a JavaScript runtime for executing JavaScript outside the browser.
| Browser | Node.js |
|---|---|
| Runs JavaScript in a browser environment | Runs JavaScript outside the browser |
| Provides browser APIs such as DOM | Provides Node.js APIs |
| Displays web pages | Provides runtime and development capabilities |
If the terminal shows an error such as:
'node' is not recognized
Node.js may not be installed correctly or its executable may not be available through the system PATH.
After installation, opening a new terminal can also be necessary so that environment changes are recognized.
A correctly configured Node.js installation should normally allow the
node command to work from a terminal without navigating
to the Node.js installation directory.
cd Desktop
node --version
If the version is displayed, the command is available from that location.
Node.js is commonly part of the React development environment. It allows developers to use JavaScript tooling and package managers needed by React projects.
Node.js
↓
npm
↓
React Dependencies
↓
Development Tools
↓
React Application
node --version.npm --version.Download Node.js
↓
Install Node.js
↓
Open Terminal
↓
node --version
↓
npm --version
↓
Create Project Folder
↓
Ready for React Development
Node.js is an important part of many modern JavaScript development environments. For React development, it is commonly used with npm and other tools to install dependencies, run development commands, and build applications.
Node.js
+
npm
↓
JavaScript Tooling
↓
React Development
After verifying node --version and
npm --version, you are ready to move to the next step:
setting up your development environment.
node --version to check the Node.js installation.npm --version to check the npm installation.package.json stores important project configuration and dependencies.node_modules contains installed project dependencies.Question: Which command is used to check the installed Node.js version?