React.js istifadə edərək veb tətbiqinin yaradılması üzrə təlimat

React.js, interaktiv istifadəçi interfeysləri (UI) qurmaq üçün istifadə edilən məşhur bir ön tərəf inkişaf kitabxanasıdır. Facebook tərəfindən hazırlanan React.js, Instagram, Airbnb və WhatsApp da daxil olmaqla bir çox böyük şirkət tərəfindən istifadə edilmişdir. Effektiv, sürətli və cavabdeh veb tətbiqləri qurmaq istəyirsinizsə , React.js sizin üçün doğru seçim ola bilər.

Pendahuluan

Başlamazdan əvvəl, kompüterinizdə Node.js və npm (Node Package Manager) proqramlarının quraşdırıldığından əmin olun. Node.js və npm vacibdir, çünki onlar React.js istifadə edərək veb tətbiqləri hazırlamaq üçün lazım olan mühit və alətləri təmin edir.

Addım 1: React Layihəsinin Başlatılması

Yeni React.js tətbiqi yaratmaq üçün ilkin konfiqurasiyanı minimuma endirən tətbiq yaratma vasitəsi olan Create React Tətbiqindən istifadə edə bilərik. Terminalınızda və ya əmr sətirinizdə aşağıdakı əmri işlədin:

“`bash
npx create-reaksiya-app my-app
cd mənim tətbiqim
npm başlanğıc
""

Bu əmr `my-app` adlı yeni bir qovluq yaradacaq, bütün lazımi asılılıqları yükləyəcək və quraşdıracaq və inkişaf serverini işə salacaq. İndi brauzer aça və standart React.js tətbiqini görmək üçün `http://localhost:3000` ünvanına daxil ola bilərsiniz.

Addım 2: Qovluq Quruluşu

Gəlin Create React App-in yaratdığı qovluq strukturuna nəzər salaq:

""
mənim-tətbiqim/
├── node_modules/
├── ictimai/
│ └── index.html
── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
── logo.svg
""

– `node_modules/`: Bütün layihə asılılıqlarınızı ehtiva edir.
– `public/`: Tətbiqin giriş nöqtəsi olan `index.html` daxil olmaqla statik faylları ehtiva edir.
– `src/`: Vaxtınızın çox hissəsini harada keçirəcəyiniz. React komponentlərini, CSS fayllarını və digər aktivləri ehtiva edir.

Addım 3: Lazımsız Faylları Silmək

Təmiz bir şəkildə başlamaq üçün bəzi lazımsız faylları silək. `src/` qovluğundakı `logo.svg` və `App.test.js` fayllarını silin. Daha sonra `App.css` və `index.css` fayllarını açın, təmiz bir stil cədvəli ilə başlamaq üçün içindəki bütün CSS kodlarını silin.

Addım 4: İlk Komponentinizi Yaradın

React.js komponent əsaslıdır. Komponentlər veb tətbiqinizin əsasını təşkil edir. İlk komponentimizi yaratmaq üçün `App.js`-ı dəyişdirək.

`src/App.js` faylını açın və onu aşağıdakı kodla əvəz edin:

“`jsx
'react'-dan React-i import et;
idxal et './App.css';

funksiya Tətbiqi() {
qayıt (

);
}

standart Tətbiqi ixrac edin;
""

JavaScript daxilində HTML kimi sintaksis yazmağa imkan verən JSX (JavaScript XML) istifadə edərək `App.js` daxilində React kodunu işə salın. Dəyişikliklərinizi yadda saxlayın və nəticələri brauzerinizdə görün.

Addım 5: Yeni Komponentlərin Əlavə Edilməsi

İndi isə bəzi yeni komponentlər əlavə edək. `src` qovluğunun içərisində `components` adlı yeni bir qovluq yaradın. Daha sonra `components` qovluğunda `HelloWorld.js` adlı yeni bir fayl yaradın.

“`jsx
'react'-dan React-i import et;

funksiyası HelloWorld() {
qayıt (

);
}

standart HelloWorld-ü ixrac edin;
""

`App.js` faylını açın və yeni yaratdığımız `HelloWorld` komponentini idxal edin:

“`jsx
'react'-dan React-i import et;
idxal et './App.css';
'./components/HelloWorld'-dən HelloWorld-u idxal et;

funksiya Tətbiqi() {
qayıt (

);
}

standart Tətbiqi ixrac edin;
""

İndi `App.js` əsas səhifədə `HelloWorld` komponentini render edir.

Addım 6: useState ilə State İdarəetməsinin Əlavə Edilməsi

React-də state-i idarə etmək üçün çox güclü qarmaqlar var. Tətbiqimizə bir state əlavə edək. Məsələn, hər düyməyə basıldıqda artan bir sayğac əlavə edək.

`HelloWorld.js` faylını açın və state və `useState` hook-larını əlavə edin:

“`jsx
'react'-dan React, {useState}-i import et;

funksiyası HelloWorld() {
const [say, setCount] = useState(0);

const incrementCount = () => {
setCount(say + 1);
}

qayıt (

);
}

standart HelloWorld-ü ixrac edin;
""

`count` vəziyyəti 0 dəyəri ilə başlanır və hər dəfə düyməyə basıldıqda `incrementCount` funksiyası bu dəyəri artıracaq.

Addım 7: Stil əlavə edin

Stil əlavə etmək üçün `App.css` faylında CSS-dən və ya styled-components kimi CSS-in-JS kitabxanasından istifadə edə bilərik. Hələlik standart CSS-dən istifadə edək.

`App.css` faylını açın və bəzi stillər əlavə edin:

“`css
.Tətbiq {
mətn düzləndirmək: mərkəz;
}

.Tətbiq başlığı {
fon rəngi: 282c34;
minimum hündürlük: 100vh;
ekran: çevik;
çevik istiqamət: sütun;
align-items: mərkəz;
əsaslandırmaq-məzmun: mərkəz;
şrift ölçüsü: calc(10px + 2vmin);
rəng: ağ;
}

düymə {
padding: 10px 20px;
margin-top: 20px;
şrift ölçüsü: 16px;
}
""

Addım 8: React Router ilə Marşrutlaşdırmanın Əlavə Edilməsi

Tətbiqimizdə müxtəlif səhifələr arasında naviqasiya əlavə etmək üçün React Router-dən istifadə edə bilərik. Aşağıdakı əmri işlədərək React Router-i quraşdırın:

“`bash
npm react-router-dom quraşdırın
""

Daha sonra, `components` qovluğunda iki yeni komponent yaradın: `Home.js` və `About.js`.

`Home.js`:
“`jsx
'react'-dan React-i import et;

funksiyası Home() {
qayıt (

);
}

standart Ana səhifəni ixrac edin;
""

`Haqqında.js`:
“`jsx
'react'-dan React-i import et;

funksiya Haqqında() {
qayıt (

);
}

ixrac standartı Haqqında;
""

Növbəti addım olaraq, `App.js` faylını açın və marşrutlaşdırmanı qurun:

“`jsx
'react'-dan React-i import et;
'react-router-dom'-dan {BrowserRouter as Router, Route, Link, Switch} idxal et;
idxal et './App.css';
'./components/HelloWorld'-dən HelloWorld-u idxal et;
'./components/Home'-dan Home-u idxal et;
'./components/About'-dan Haqqımızda idxal et;

funksiya Tətbiqi() {
qayıt (

);
}

standart Tətbiqi ixrac edin;
""

Bununla, tətbiqimizdəki müxtəlif səhifələr arasında əsas naviqasiya əlavə etdik.

Bağlanır

Bu, React.js istifadə edərək veb tətbiqi yaratmaq üçün əsas təlimatdır . Layihənin qurulması, komponent yaradılması, vəziyyətin idarə edilməsi, stilizasiya və marşrutlaşdırmanı əhatə etdik. React.js daha mürəkkəb veb tətbiqləri qurmağınıza kömək edə biləcək çoxsaylı kitabxanalar və alətlərlə zəngin bir ekosistemə malikdir.

Uğurlar və ümid edirəm ki, bu dərslik React.js ilə səyahətinizə başlamağınıza kömək edəcək!