Frontend proqramlaşdırma — istifadəçilərin birbaşa qarşılıqlı əlaqədə olduğu veb sayt və tətbiqlərin hazırlanması prosesidir. Müasir dövrdə frontend developer-lər HTML, CSS və JavaScript kimi əsas texnologiyalarla yanaşı, React, Vue və Angular kimi kitabxana və framework-lərdən də geniş istifadə edirlər. Xüsusilə React, interaktiv və yüksək performanslı veb saytların hazırlanmasında ən çox üstünlük verilən vasitələrdən biridir.
Quraşdırma (Installation)
React, component-based yanaşması ilə ön planda olan açıq mənbə JavaScript kitabxanasıdır. Sadə bir Hello, world! tətbiqi ilə React-in necə işlədiyini başa düşmək mümkündür. Əgər frontend proqramlaşdırma sahəsinə yeni başlamısansa, React-i sandbox və ya sadə HTML faylı ilə sınaqdan keçirmək mükəmməl başlanğıcdır. Daha sonra isə geniş imkanlara malik framework-lərlə keçid edə bilərsən.
React əvvəlcədən tədricən mənimsənilmək üçün dizayn edilib. Yəni istəsən çox az bir hissəsindən istifadə edə bilərsən, ya da tam kompleks bir React tətbiqi qura bilərsən. Sadəcə React-ın dadına baxmaq, HTML səhifəsinə bir az interaktivlik əlavə etmək və ya sıfırdan mürəkkəb bir React tətbiqi qurmaq istəsən belə, bu bölmə sənə başlamaq üçün kömək edəcək.
React-i sınaqdan keçirt (Try React)
React ilə məşq etmək üçün heç nə quraşdırmağa ehtiyac yoxdur. Bu sandbox-u redaktə edib sınaya bilərsən:
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}export default function App() {
return <Greeting name="world" />
}
React-i kompüterində lokal olaraq sınaqdan keçirmək istəyirsənsə, bu HTML səhifəsini yükləyə bilərsən. Onu həm editor-da, həm də brauzer-də aça bilərsən!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.Read this page for starting a new React project with JSX:
https://react.dev/learn/start-a-new-react-projectRead this page for adding React with JSX to an existing project:
https://react.dev/learn/add-react-to-an-existing-project
-->
</body>
</html>
Bu HTML faylını .html uzantısı ilə yadda saxlayıb brauzerdə aça bilərsən. React-in necə işlədiyini yerli səviyyədə yoxlamaq üçün çox uyğundur. Amma qeyd edildiyi kimi, bu üsul real proyektlər üçün uyğun deyil – yalnız öyrənmək və test üçün nəzərdə tutulub.
React App, Veb Sayt Yaratmaq (Creating a React App)
Əgər yeni bir tətbiq və ya veb sayt yaratmaq istəyirsənsə, framework ilə başlamağı tövsiyə edirik.
Əgər tətbiqin mövcud framework-lərin dəstəkləmədiyi məhdudiyyətlərə malikdirsə, öz framework-unu yaratmaq istəyirsənsə və ya sadəcə React tətbiqinin əsaslarını öyrənmək istəyirsənsə, React tətbiqini sıfırdan qura bilərsən.
Frontend Proqramlaşdırma Full-stack frameworks
Müasir frontend proqramlaşdırma artıq yalnız brauzer tərəfində məhdudlaşmır. Next.js, React Router, Expo və RedwoodJS kimi alətlər həm client-side rendering (CSR), həm də server-side rendering (SSR) imkanları təqdim edir. Bu framework-lər ilə frontend developer olaraq həm statik saytlar, həm də dinamik, SEO-optimallaşdırılmış veb layihələr qura bilərsən.
Tövsiyə olunan bu framework-lər veb saytını deploy etmək və böyütmək üçün lazım olan bütün funksiyaları dəstəkləyir. Onlar React-in son xüsusiyyətlərini inteqrasiya ediblər və React-in arxitekturasından tam istifadə edirlər.
Qeyd: Full-stack frameworks server tələb etmir.
Bu səhifədəki bütün framework-lər client-side rendering (CSR), single-page apps (SPA) və static-site generation (SSG) dəstəkləyir. Bu tətbiqlər (veb sayt) CDN və ya statik hosting xidmətinə server olmadan yerləşdirilə bilər. Əlavə olaraq, bu framework-lər istəyə əsasən bəzi marşrutlar (per-route basis) üçün server-side rendering əlavə etməyə imkan verir.
- server-side rendering (SSR) – Bu, veb saytın məzmununun serverdə hazırlanıb (render olunub) brauzerə göndərilməsi üsuludur. Beləliklə, səhifə istifadəçinin brauzerinə daha tez görünə bilər və SEO baxımından da üstünlük verir.
- per-route basis - Söhbət URL-lərdən (səhifələrdən) gedir. Məsələn, /about, /product/123 kimi.
Bu da o deməkdir ki, veb sayt hazırlayarkən yalnız client tərəfli (yəni brauzer əsaslı) başlaya bilərsən və gələcəkdə ehtiyac yaranarsa, server xüsusiyyətlərini əlavə etməklə tətbiqi dəyişmədən davam etdirə bilərsən. Hansı rendering strategiyasını necə qurmaq barədə məlumat üçün istifadə etdiyin framework-un sənədlərinə bax.
Next.js (App Router)
Next.js App Router, React-in arxitekturasından tam istifadə edən və full-stack React tətbiqləri yaratmağa imkan verən bir framework-dür.
Yeni layihə yaratmaq üçün terminalda aşağıdakı əmri işə sal:
npx create-next-app@latest
Next.js Vercel tərəfindən dəstəklənir. Next.js ilə hazırlanan veb saytlar Node.js, Docker konteynerləri dəstəkləyən istənilən hosting xidmətinə və ya öz serverinə yerləşdirə bilərsən. Bundan əlavə, static export dəstəyi ilə serverə ehtiyac olmadan veb saytı yerləşdirmək mümkündür.
React Router (v7)
React Router, React üçün ən populyar routing kitabxanasıdır və Vite ilə birlikdə full-stack React framework kimi istifadə oluna bilər. Bu framework standart Web API-ləri ön plana çıxarır və JavaScript platformaları üçün istifadəyə hazır şablonlar təqdim edir.
Yeni React Router framework layihəsi yaratmaq üçün:
npx create-react-router@latest
React Router Shopify tərəfindən dəstəklənir.
Expo (mobil tətbiqlər üçün)
Frontend proqramlaşdırma yalnız veb saytlarla məhdudlaşmır. Expo kimi alətlərlə mobil tətbiqlər yaratmaq mümkündür. Eyni kod bazası ilə Android, iOS və hətta veb üçün tətbiq hazırlamaq mümkündür – bu da resursların optimallaşdırılması deməkdir. Expo, React Native əsaslı tətbiqlər yaratmağa imkan verən bir framework-dür. Bu framework ilə eyni anda Android, iOS və web üçün native görünüşlü tətbiqlər yarada bilərsən. SDK vasitəsilə native hissələri idarə etmək daha asan olur.
Yeni Expo layihəsi yaratmaq üçün terminalda bu əmri yaz:
npx create-expo-app@latest
Expo haqqında daha çox məlumat almaq üçün Expo tutorial-a bax.
Expo eyni adlı şirkət tərəfindən dəstəklənir. Expo ilə tətbiqlər yaratmaq pulsuzdur və bu tətbiqləri Google və Apple mağazalarına sərbəst şəkildə yükləyə bilərsən. Expo həmçinin pullu cloud xidmətlərini də əlavə seçim olaraq təklif edir.
Digər framework-lər
Bunlar da React üçün full-stack yanaşmanı dəstəkləməyə doğru irəliləyən digər yeni framework-lərdir:
- TanStack Start (Beta): TanStack Router tərəfindən gücləndirilən bir full-stack React framework-dür. SSR, streaming, server functions, bundling və s. imkanlar təqdim edir. Nitro və Vite kimi alətlərdən istifadə edir.
- RedwoodJS: Əvvəlcədən qurulmuş paketlər və konfiqurasiyalarla gələn full-stack React framework-dür. Full-stack web tətbiqləri yaratmaq üçün əlverişlidir.
Sıfırdan Başlamaq
Əgər veb saytın mövcud framework-lər tərəfindən yaxşı dəstəklənmirsə, öz framework-unu yaratmaq istəyirsənsə və ya React-in əsaslarını daha dərindən öyrənmək niyyətindəsənsə, React layihəsini sıfırdan başlatmaq yaxşı seçimdir. Bu yanaşma frontend proqramlaşdırma bacarıqlarını möhkəmləndirmək üçün mükəmməldir.
Nəticə
Frontend proqramlaşdırma sahəsində React, istifadəçilərlə interaktiv və performanslı veb və mobil tətbiqlər yaratmaq üçün güclü imkanlar təqdim edir. Sadə bir HTML faylında React-i sınamaqla başlayıb, daha sonra Next.js, React Router və Expo kimi müasir framework-lərlə kompleks tətbiqlər yarada bilərsən. Bu framework-lər həm client-side, həm də server-side rendering dəstəyi ilə miqyaslana bilən və SEO baxımından optimallaşdırılmış layihələr qurmağa imkan verir.
Frontend Müsahibə Sualları
React‑də “component‑based” yanaşma nədir və hansı üstünlükləri verir?
“Component-based” yanaşma — istifadəçi interfeysini kiçik, müstəqil və yenidən istifadə oluna bilən bloklara (komponentlərə) bölmək prinsipidir. Hər bir komponent öz məntiqi (logic), üslubu (style) və daxili vəziyyəti (state) ilə birlikdə işləyir.
Bu yanaşmanın əsas üstünlükləri bunlardır:
- Kodun təkrar istifadəsi (Reusability): Eyni komponenti fərqli səhifə və ya hissələrdə istifadə etmək olur.
- Modulluq və oxunaqlılıq: Kod daha səliqəli və başa düşülən olur.
- Test və texniki xidmətin asanlaşdırılması: Hər komponenti ayrıca test etmək və düzəlişlər etmək mümkündür.
- Komanda işi zamanı paralel işləmək: Fərqli frontend developer-lər eyni anda müxtəlif komponentlər üzərində işləyə bilirlər.
- Performans optimallaşdırması: Code splitting və lazy loading kimi üsullar komponent səviyyəsində tətbiq oluna bilər, bu da ilkin yüklənməni azaldır.
Client‑Side Rendering (CSR) ilə Server‑Side Rendering (SSR) arasındakı fərq nədir və SEO‑ya təsirləri necədir?
CSR – HTML ilkin olaraq minimal‑boş gəlir, bütün məzmun JavaScript vasitəsilə brauzerdə yığılır. İlk yüklənmə bir qədər gec, lakin istifadəçi interfeysi sonrası interaktivlik yüksəkdir. SEO üçün əlavə optimizasiya (məs., prerendering) tələb edə bilər.
SSR – HTML serverdə render olunur və tam formada brauzerə göndərilir; səhifə istifadəçiyə daha tez görünür, axtarış botları məzmunu dərhal oxuya bilir. React‑də SSR‑i Next.js kimi framework‑lərlə qurmaq asandır və SEO baxımından üstün nəticə verir.
Next.js, React Router və Expo hansı hallarda seçilməlidir?
Next.js – SEO önəmlidirsə, Server-Side Rendering (SSR) və ya Static Site Generation (SSG) kimi funksiyalar tələb olunursa, yaxud hazır konfiqurasiya və imkanlarla zəngin (batteries-included) bir ekosistem axtarırsınızsa (məsələn: routing, API routes, image optimization), Next.js ideal seçimdir.
React Router + Vite – Əgər layihəniz SPA (Single Page Application) yönümlüdürsə, özünüz konfiqurasiyanı tam idarə etmək istəyirsinizsə, və ya mövcud bir backend üzərinə sadəcə React əsaslı interfeys əlavə etmək lazımdırsa, bu kombinasiya daha yüngül və çevik yanaşma təqdim edir.
Expo (React Native) – Android, iOS və Web üçün eyni kod bazası ilə mobil tətbiqlər hazırlamaq istəyirsinizsə və over-the-air (OTA) yeniləmə imkanlarından yararlanmaq niyyətindəsinizsə, Expo sürətli və rahat inkişaf mühiti təmin edir.
Seçim layihənin ölçüsündən, SEO tələblərindən, komanda bacarıqlarından və yayım strategiyasından asılı olaraq dəyişir.
