JavaScript and React course · Module 1: React Basics
Installing Node.js and npm
In this lesson6
Before we start using React, we need to install the basic tools - Node.js and npm (Node Package Manager). It's like preparing oxygen supplies and fuel before heading into space.
What is Node.js?
Node.js is a platform that allows you to run JavaScript outside the browser. Traditionally, JavaScript was a language that only ran in browsers, but Node.js changed that by enabling JavaScript to run on servers and in developer tools as well.
For a React developer, Node.js is essential for:
- Running a local development server
- Using a package manager (npm or yarn)
- Building and compiling applications
- Running tools like linters, formatters, and tests
What is npm?
npm (Node Package Manager) is the world's largest software package registry. It's a repository containing millions of packages and libraries that you can add to your project. Imagine a gigantic catalog of spare parts for spaceships - whatever you need, you'll probably find it in npm.
Node.js and npm installation process
For Windows:
- Visit the official Node.js website
- Download the LTS (Long-Term Support) version - this version is the most stable and recommended for most users
- Run the downloaded installer and follow the instructions
- The installer will automatically install both Node.js and npm
For macOS:
Option 1: Installer
- Visit Node.js and download the installer for macOS
- Run the installer and follow the instructions
Option 2: Homebrew (recommended if you already have Homebrew)
- Open terminal
- Type:
brew install node
For Linux:
The nodejs package from your distribution's repositories is often too old for Vite (Ubuntu 22.04 installs Node 12, Ubuntu 24.04 and Debian 12 install Node 18, while current Vite needs Node 20.19 or newer). The safest way is to install the current LTS with nvm (Node Version Manager): copy the nvm install command from the nodejs.org download page (choose Linux and nvm), then run:
1nvm install --ltsVerifying the installation
After completing the installation, open the terminal (or command prompt) and verify the installation by typing:
1node -v
2npm -vYou should see version numbers, for example v22.12.0 for Node.js and 10.9.0 for npm (yours may be newer). Node.js must be at least version 20.19, because Vite requires it. If you see this information, congratulations! Your spaceship is ready for the journey.
Alternative package managers
Besides npm, there are also alternative package managers you can consider:
Yarn
Yarn is a package manager created by Facebook that offers faster package downloading and better dependency management.
Installation:
1npm install -g yarnpnpm
pnpm is an efficient package manager that saves disk space by sharing common dependencies between projects.
Installation:
1npm install -g pnpmIn this course, we'll mainly use npm, but all commands have their equivalents in Yarn and pnpm.
Next steps
Now that you have Node.js and npm installed, you're ready to create React applications! In the next lesson, we'll learn how to create a new React project using Vite.
Code for this lesson: App.jsx
1import React, { useState } from 'react';
2
3// Demonstration of npm concepts and package management in React
4function PackageManager() {
5 const [packages, setPackages] = useState([
6 { name: 'react', version: '19.2.0', description: 'Library for building UI' },
7 { name: 'react-dom', version: '19.2.0', description: 'Renders React in the browser' },
8 { name: 'axios', version: '1.4.0', description: 'HTTP client for API' },
9 ]);
10
11 const [newPackage, setNewPackage] = useState('');
12
13 const installPackage = () => {
14 if (newPackage.trim()) {
15 setPackages([...packages, {
16 name: newPackage,
17 version: '1.0.0',
18 description: 'Newly installed package'
19 }]);
20 setNewPackage('');
21 }
22 };
23
24 const removePackage = (name) => {
25 setPackages(packages.filter(pkg => pkg.name !== name));
26 };
27
28 return (
29 <div style={{
30 fontFamily: 'Arial, sans-serif',
31 maxWidth: '800px',
32 margin: '0 auto',
33 padding: '20px'
34 }}>
35 <header style={{
36 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
37 padding: '30px',
38 borderRadius: '12px',
39 color: 'white',
40 textAlign: 'center',
41 marginBottom: '30px'
42 }}>
43 <h1 style={{ margin: 0 }}>NPM Package Manager</h1>
44 <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>
45 Simulating package management in a React project
46 </p>
47 </header>
48
49 <div style={{
50 display: 'flex',
51 gap: '10px',
52 marginBottom: '20px'
53 }}>
54 <input
55 type="text"
56 value={newPackage}
57 onChange={(e) => setNewPackage(e.target.value)}
58 placeholder="Package name to install..."
59 style={{
60 flex: 1,
61 padding: '12px 15px',
62 border: '2px solid #e0e0e0',
63 borderRadius: '8px',
64 fontSize: '16px'
65 }}
66 />
67 <button
68 onClick={installPackage}
69 style={{
70 padding: '12px 24px',
71 backgroundColor: '#4caf50',
72 color: 'white',
73 border: 'none',
74 borderRadius: '8px',
75 cursor: 'pointer',
76 fontWeight: 'bold'
77 }}
78 >
79 npm install
80 </button>
81 </div>
82
83 <div style={{
84 backgroundColor: '#1e1e1e',
85 borderRadius: '8px',
86 padding: '15px',
87 marginBottom: '20px',
88 fontFamily: 'monospace',
89 color: '#00ff00'
90 }}>
91 <div style={{ color: '#888', marginBottom: '5px' }}>$ npm install {newPackage || '<package-name>'}</div>
92 <div>added 1 package in 0.5s</div>
93 </div>
94
95 <h2 style={{ color: '#333', marginBottom: '15px' }}>
96 Installed packages ({packages.length})
97 </h2>
98
99 <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
100 {packages.map((pkg, index) => (
101 <div key={index} style={{
102 display: 'flex',
103 alignItems: 'center',
104 padding: '15px',
105 backgroundColor: '#f8f9fa',
106 borderRadius: '8px',
107 border: '1px solid #e0e0e0'
108 }}>
109 <div style={{ flex: 1 }}>
110 <div style={{
111 fontWeight: 'bold',
112 color: '#333',
113 marginBottom: '5px'
114 }}>
115 {pkg.name} <span style={{ color: '#666', fontWeight: 'normal' }}>v{pkg.version}</span>
116 </div>
117 <div style={{ color: '#666', fontSize: '14px' }}>
118 {pkg.description}
119 </div>
120 </div>
121 <button
122 onClick={() => removePackage(pkg.name)}
123 style={{
124 padding: '8px 16px',
125 backgroundColor: '#f44336',
126 color: 'white',
127 border: 'none',
128 borderRadius: '4px',
129 cursor: 'pointer'
130 }}
131 >
132 Uninstall
133 </button>
134 </div>
135 ))}
136 </div>
137
138 <div style={{
139 marginTop: '30px',
140 padding: '20px',
141 backgroundColor: '#e3f2fd',
142 borderRadius: '8px'
143 }}>
144 <h3 style={{ color: '#1976d2', marginTop: 0 }}>Basic npm commands</h3>
145 <ul style={{ color: '#333', lineHeight: '1.8' }}>
146 <li><code>npm init</code> - Initialize a new project</li>
147 <li><code>npm install</code> - Install all dependencies</li>
148 <li><code>npm install package-name</code> - Install a specific package</li>
149 <li><code>npm uninstall package-name</code> - Uninstall a package</li>
150 <li><code>npm run dev</code> - Start the development server (Vite project)</li>
151 </ul>
152 </div>
153 </div>
154 );
155}
156
157export default function App() {
158 return <PackageManager />;
159}Spotted a mistake in this lesson?
Hands-on tasks in the game
- Horizontal ordering
Arrange the command for installing React using npm:
- Click in order
Build the command: go to the Vite project folder and start the development server:
- Vertical ordering
Arrange the React installation process from scratch: