Kurs JavaScript i React · Moduł 1: Podstawy React
Instalacja Node.js i npm
W tej lekcji6
Zanim zaczniemy korzystać z React, musimy zainstalować podstawowe narzędzia - Node.js i npm (Node Package Manager). To jak przygotowanie zapasów tlenu i paliwa przed wyruszeniem w kosmos.
Czym jest Node.js?
Node.js to platforma, która pozwala uruchamiać JavaScript poza przeglądarką. Tradycyjnie JavaScript był językiem działającym tylko w przeglądarkach, ale Node.js zmienił to, umożliwiając uruchamianie JavaScript również na serwerach i w narzędziach deweloperskich.
Dla dewelopera React, Node.js jest niezbędny do:
- Uruchamiania lokalnego serwera deweloperskiego
- Korzystania z menedżera pakietów (npm lub yarn)
- Budowania i kompilowania aplikacji
- Uruchamiania narzędzi takich jak lintery, formatery czy testy
Czym jest npm?
npm (Node Package Manager) to największy na świecie rejestr pakietów oprogramowania. To magazyn zawierający miliony pakietów i bibliotek, które możesz dodać do swojego projektu. Wyobraź sobie gigantyczny katalog części zamiennych do statków kosmicznych - cokolwiek potrzebujesz, prawdopodobnie znajdziesz to w npm.
Proces instalacji Node.js i npm
Dla Windows:
- Odwiedź oficjalną stronę Node.js
- Pobierz wersję LTS (Long-Term Support) - ta wersja jest najbardziej stabilna i zalecana dla większości użytkowników
- Uruchom pobrany instalator i postępuj zgodnie z instrukcjami
- Instalator automatycznie zainstaluje zarówno Node.js, jak i npm
Dla macOS:
Opcja 1: Instalator
- Odwiedź Node.js i pobierz instalator dla macOS
- Uruchom instalator i postępuj zgodnie z instrukcjami
Opcja 2: Homebrew (zalecane, jeśli masz już Homebrew)
- Otwórz terminal
- Wpisz:
brew install node
Dla Linux:
Pakiet nodejs z repozytoriów dystrybucji bywa za stary dla Vite (Ubuntu 22.04 instaluje Node 12, Ubuntu 24.04 i Debian 12 - Node 18, a aktualne Vite wymaga Node 20.19 lub nowszego). Najpewniej zainstalujesz aktualną wersję LTS przez nvm (menedżer wersji Node): polecenie instalacji nvm skopiujesz ze strony pobierania nodejs.org (wybierz Linux i nvm), a potem wpiszesz:
1nvm install --ltsWeryfikacja instalacji
Po zakończeniu instalacji, otwórz terminal (lub wiersz poleceń) i zweryfikuj instalację, wpisując:
1node -v
2npm -vPowinieneś zobaczyć numery wersji, na przykład v22.12.0 dla Node.js i 10.9.0 dla npm (u Ciebie mogą być nowsze). Node.js musi mieć co najmniej wersję 20.19, bo tego wymaga Vite. Jeśli widzisz te informacje, gratulacje! Twój statek kosmiczny jest gotowy do podróży.
Alternatywne menedżery pakietów
Oprócz npm, istnieją również alternatywne menedżery pakietów, które możesz rozważyć:
Yarn
Yarn to menedżer pakietów stworzony przez Facebook, który oferuje szybsze pobieranie pakietów i lepsze zarządzanie zależnościami.
Instalacja:
1npm install -g yarnpnpm
pnpm to wydajny menedżer pakietów, który oszczędza miejsce na dysku, współdzieląc wspólne zależności między projektami.
Instalacja:
1npm install -g pnpmW tym kursie będziemy używać głównie npm, ale wszystkie polecenia mają swoje odpowiedniki w Yarn i pnpm.
Następne kroki
Teraz, gdy masz już zainstalowane Node.js i npm, jesteś gotowy do tworzenia aplikacji React! W następnej lekcji nauczymy się, jak utworzyć nowy projekt React przy użyciu Vite.
Kod do tej lekcji: App.jsx
1import React, { useState } from 'react';
2
3// Demonstracja koncepcji npm i zarządzania pakietami w React
4function PackageManager() {
5 const [packages, setPackages] = useState([
6 { name: 'react', version: '19.2.0', description: 'Biblioteka do budowania UI' },
7 { name: 'react-dom', version: '19.2.0', description: 'Renderowanie React w przeglądarce' },
8 { name: 'axios', version: '1.4.0', description: 'Klient HTTP dla 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: 'Nowo zainstalowany pakiet'
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 Symulacja zarządzania pakietami w projekcie React
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="Nazwa pakietu do instalacji..."
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 Zainstalowane pakiety ({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 Odinstaluj
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 }}>Podstawowe komendy npm</h3>
145 <ul style={{ color: '#333', lineHeight: '1.8' }}>
146 <li><code>npm init</code> - Inicjalizacja nowego projektu</li>
147 <li><code>npm install</code> - Instalacja wszystkich zależności</li>
148 <li><code>npm install nazwa-pakietu</code> - Instalacja konkretnego pakietu</li>
149 <li><code>npm uninstall nazwa-pakietu</code> - Odinstalowanie pakietu</li>
150 <li><code>npm run dev</code> - Uruchomienie serwera deweloperskiego (projekt Vite)</li>
151 </ul>
152 </div>
153 </div>
154 );
155}
156
157export default function App() {
158 return <PackageManager />;
159}Widzisz błąd w tej lekcji?
Zadania praktyczne w grze
- Układanie w poziomie
Ułóż polecenie instalacji pakietu React za pomocą npm:
- Klikanie w kolejności
Zbuduj polecenie: przejdź do folderu projektu Vite i uruchom serwer deweloperski:
- Układanie w pionie
Ułóż proces instalacji React od zera: