roadmap.az

Menyu

ReactDərs 11 / 15

React üçün layihə mühiti

Node.js, npm və modullar

Node.js JavaScript-i brauzerdən kənarda işlədən mühitdir. npm paketləri və package.json-da qeyd edilən əmrləri idarə edir. dependencies tətbiq asılılıqları, devDependencies hazırlama alətləri üçün istifadə olunur; lock faylı quraşdırılan versiyaları təkrarlamağa kömək edir.

# Mövcud roadmap.az layihəsindən ayrı təlim qovluğunda:
npm create vite@latest my-react-practice -- --template react
cd my-react-practice
npm install
npm run dev
npm run build
npm run preview
Nümunə

Build aləti nə edir?

Brauzer bütün mənbə formatlarını birbaşa icra etmir. Build aləti import asılılıqlarını emal edir, JSX-i çevirir, CSS və şəkilləri hazırlayır, yayım çıxışını yaradır. Dev serverin işləməsi istehsal build-in yoxlanmasını əvəz etmir. Alətin tələb etdiyi Node.js versiyasını rəsmi sənəddən yoxla.

// price.js
export const formatPrice = value => `${value} AZN`;
// Başqa modulda:
// import { formatPrice } from './price.js';
Nümunə

Webpack layihələrində entry giriş nöqtəsi, output çıxış, loader mənbə çevirməsi, plugin isə build prosesinə əlavə davranış verir. Babel kimi çevirmə alətləri JSX emalı üçün istifadə oluna bilər. Bu anlayışları tanı, amma ilkin React dərsi üçün hamısını əl ilə qurmaq məcburi deyil. Create React App yeni layihələr üçün köhnəlib; yeni qurulumda rəsmi müasir təlimatı izlə. node_modules-u versiya nəzarətinə əlavə etmə.

Əlavə qeydlər və mənbələr

Node.js, npm, package.json, asılılıqlar və modulların rolunu öyrən. Bundler məntiqini anla və React üçün ayrıca lokal təlim layihəsi qur.

Niyə vacibdir?

Alətlər təkrarlanan işi azaldır; onların rolunu anlamaq quraşdırma problemlərini həll etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

  • Node.js və npm
  • package.json və asılılıqlar
  • Modullar, bundler və layihə qurulması

Mövzuya baxış

İnkişaf və istehsal fərqi

İnkişaf serveri dəyişiklikləri tez görmək üçün işləyir. build əmri isə yayıma uyğun fayllar yaradır. Skript adları layihənin package.json faylında müəyyən edilir; hər layihədə eyni olmaya bilər.

npm install
npm run dev
npm run build
Nümunə

package-lock.json dəqiq asılılıq versiyalarını qeyd edir və Git-də saxlanmalıdır. Lock faylı olan mövcud layihədə npm ci təkrarlana bilən quraşdırma üçün uyğundur. node_modules qovluğu isə paketlərdən yenidən yaradılır.

React təlim layihəsinin hazırlanması

Node.js JavaScript-i brauzerdən kənarda işlədir. npm isə package.json vasitəsilə paketləri və skriptləri idarə edir. Bundler modul asılılıqlarını hazırlayır və JSX kimi mənbələri brauzer üçün uyğun çıxışa çevirir. Bu mövzu Node.js, npm, Webpack və köhnə React qurulumunu ətraflı göstərir.

Create React App yeni tətbiqlər üçün köhnəlib. React-i sıfırdan öyrəndiyin ayrıca təlim layihəsi üçün Vite kimi build alətinin rəsmi qurulumundan istifadə edə bilərsən:

npm create vite@latest my-react-practice -- --template react
cd my-react-practice
npm install
npm run dev
npm run build
npm run preview
Nümunə

Bu əmrləri roadmap.az qovluğunun içində mövcud layihəni əvəz etmək üçün işlətmə; ayrıca təlim qovluğu yarat. İstifadə etdiyin alətin Node.js tələblərini rəsmi sənəddən yoxla. node_modules generasiya olunur; package.json və lock faylı layihənin mənbəyində saxlanır.

Mövzu üzrə praktika

Vite ilə sadə JavaScript layihəsi yarat, əvvəlki tapşırıq siyahını köçür və istehsal build-i hazırla.

Təmiz qovluqda npm ci və npm run build uğurla işləyir.

Mövzunun yoxlama siyahısı

  • package.json və lock faylını tanı
  • Dependency və devDependency fərqini öyrən
  • npm scripts ilə dev və build əmrlərini işlət
  • node_modules qovluğunu Git-dən kənar saxla
  • Node.js, modullar və bundler-in rolu
  • React üçün ayrıca lokal təlim layihəsi

Mənbələr

Məşqin idarəetməsi
Addım 1 / 2

Layihəni build-ə hazırla

Asılılıqları quraşdırmadan build-in niyə alınmadığını sına, sonra düzəlt.

Prosesi son vəziyyətə çatdır.

  1. Mənbə kodu hazırdır
  2. Asılılıqlar çatmır
  3. Paketlər hazırdır
  4. Build hazırdır
Mənbə kodu hazırdır

package.json var, asılılıqlar hələ quraşdırılmayıb.

package.json

Bu məşq prosesi modelləşdirir.

Özün sına

React üçün lokal təlim layihəsi qur. Dev, build və preview əmrlərini izah et; node_modules-u repozitoriyaya əlavə etmə və lock faylını saxla.

Nəticəni necə yoxlayım?

Ayrı təlim layihəsi dev, build və preview ilə işləyir; asılılıq, skript və bundler-in rolunu izah edirsən.

Gözlənilən nəticə

  • Dev serverdə dəyişiklik görünür; build dist qovluğu yaradır.
  • Preview hazır çıxışı göstərir; node_modules Git-ə əlavə edilmir.
Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Ayrı təlim qovluğu yarat. Bu əmrlər roadmap.az mənbəyini dəyişmək üçün deyil; alətin tələb etdiyi Node versiyasını öz sənədindən yoxla.

terminal.sh

npm create vite@latest my-react-practice -- --template react
cd my-react-practice
npm install
npm run dev
# Dev serveri dayandırdıqdan sonra:
npm run build
npm run preview
# package-lock.json saxlanır, node_modules isə .gitignore-da qalır.

.gitignore

node_modules/
dist/

emrler.txt

dev: mənbə ilə hazırlama serveri.
build: istehsal üçün dist çıxışı.
preview: hazır build-in lokal yoxlaması.
Lock faylı: təkrarlana bilən asılılıq quraşdırılması.

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.