React.js yordamida veb-ilova yaratish bo'yicha qo'llanma

React.js - interaktiv foydalanuvchi interfeyslarini (UI) yaratish uchun ishlatiladigan mashhur front-end ishlab chiqish kutubxonasi. Facebook tomonidan ishlab chiqilgan React.js Instagram, Airbnb va WhatsApp kabi ko'plab yirik kompaniyalar tomonidan ishlatilgan. Agar siz samarali, tezkor va moslashuvchan veb-ilovalarni yaratmoqchi bo'lsangiz , React.js siz uchun to'g'ri tanlov bo'lishi mumkin.

Pendahuluan

Boshlashdan oldin, kompyuteringizda Node.js va npm (Node Package Manager) o'rnatilganligiga ishonch hosil qiling. Node.js va npm juda muhim, chunki ular React.js yordamida veb-ilovalarni ishlab chiqish uchun zarur bo'lgan muhit va vositalarni taqdim etadi.

1-qadam: React loyihasini ishga tushirish

Yangi React.js ilovasini yaratish uchun biz dastlabki konfiguratsiyani minimallashtiradigan ilova yaratish vositasi bo'lgan Create React App dan foydalanishimiz mumkin. Terminalingizda yoki buyruq satrida quyidagi buyruqni bajaring:

“`bash
npx create-reaksiya-ilovasi mening-ilovam
cd mening ilovam
npm boshlash
""

Ushbu buyruq `my-app` nomli yangi katalog yaratadi, barcha kerakli bog'liqliklarni yuklab oladi va o'rnatadi hamda ishlab chiqish serverini ishga tushiradi. Endi siz brauzerni ochib, standart React.js ilovasini ko'rish uchun `http://localhost:3000` ga kirishingiz mumkin.

2-qadam: Papka tuzilishi

Keling, Create React App tomonidan yaratilgan papka tuzilishini ko'rib chiqaylik:

""
mening ilovam/
├── tugun_modullari/
├── ommaviy/
│ └── index.html
── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
── logo.svg
""

– `node_modules/`: Loyihangizning barcha bog'liqliklarini o'z ichiga oladi.
– `public/`: Ilovaning kirish nuqtasi bo'lgan `index.html` ni o'z ichiga olgan statik fayllarni o'z ichiga oladi.
– `src/`: Vaqtingizning ko'p qismini qayerda o'tkazasiz. React komponentlari, CSS fayllari va boshqa aktivlarni o'z ichiga oladi.

3-qadam: Keraksiz fayllarni o'chirish

Boshlash uchun, keraksiz fayllarni o'chirib tashlaymiz. `src/` papkasidagi `logo.svg` va `App.test.js` fayllarini o'chirib tashlang. Keyin, `App.css` va `index.css` fayllarini oching, ulardagi barcha CSS kodlarini o'chirib, toza uslublar jadvalini yarating.

4-qadam: Birinchi komponentingizni yaratish

React.js komponentlarga asoslangan. Komponentlar veb-ilovangizning asosiy bloklari hisoblanadi. Birinchi komponentimizni yaratish uchun "App.js" ni o'zgartiraylik.

`src/App.js` faylini oching va uni quyidagi kod bilan almashtiring:

“`jsx
'react' dan React ni import qilish;
import './App.css';

funksiya App() {
qaytish (

);
}

standart ilovani eksport qilish;
""

JSX (JavaScript XML) yordamida `App.js` ichidagi React kodini ishga tushiring, bu bizga JavaScript ichida HTMLga o'xshash sintaksis yozish imkonini beradi. O'zgarishlaringizni saqlang va natijalarni brauzeringizda ko'ring.

5-qadam: Yangi komponentlarni qo'shish

Endi yangi komponentlar qo'shamiz. `src` papkasida `components` nomli yangi papka yarating. Keyin `components` papkasida `HelloWorld.js` nomli yangi fayl yarating.

“`jsx
'react' dan React ni import qilish;

HelloWorld() funksiyasi {
qaytish (

);
}

standart HelloWorld eksporti;
""

`App.js` faylini oching va biz hozirgina yaratgan `HelloWorld` komponentini import qiling:

“`jsx
'react' dan React ni import qilish;
import './App.css';
'./components/HelloWorld' dan HelloWorld ni import qilish;

funksiya App() {
qaytish (

);
}

standart ilovani eksport qilish;
""

Endi, `App.js` asosiy sahifada `HelloWorld` komponentini renderlaydi.

6-qadam: useState yordamida holat boshqaruvini qo'shish

React holatni boshqarish uchun juda kuchli ilmoqlarga ega. Keling, dasturimizga biror holat qo'shaylik. Masalan, har bir tugma bosilganda oshib boradigan hisoblagich qo'shaylik.

`HelloWorld.js` faylini oching va state va `useState` hook-larini qo'shing:

“`jsx
'react' dan React, {useState} ni import qilish;

HelloWorld() funksiyasi {
const [son, setCount] = useState(0);

const incrementCount = () => {
Hisoblash(son + 1);
}

qaytish (

);
}

standart HelloWorld eksporti;
""

`count` holati 0 qiymati bilan ishga tushiriladi va har safar tugma bosilganda `incrementCount` funksiyasi bu qiymatni oshiradi.

7-qadam: Uslubni qo'shish

Uslub qo'shish uchun biz `App.css` faylida CSS dan foydalanishimiz yoki styled-components kabi CSS-in-JS kutubxonasidan foydalanishimiz mumkin. Hozircha standart CSS bilan cheklanib qolaylik.

"App.css" faylini oching va ba'zi uslublarni qo'shing:

“`css
.Ilova {
matn-align: center;
}

.App-sarlavhasi {
fon rangi: 282c34;
minimal balandlik: 100vh;
displey: moslashuvchan;
moslashuvchan yo'nalish: ustun;
align-items: markaz;
asoslash-tarkib: markaz;
shrift o'lchami: calc(10px + 2vmin);
rang: oq;
}

tugma {
to'ldirish: 10px 20px;
margin-to'p: 20px;
shrift hajmi: 16px;
}
""

8-qadam: React Router yordamida marshrutizatsiyani qo'shish

Ilovamizdagi turli sahifalar o'rtasida navigatsiya qo'shish uchun biz React Router dan foydalanishimiz mumkin. Quyidagi buyruqni bajarib, React Router ni o'rnating:

“`bash
npm o'rnatish react-router-dom
""

Keyin, ikkita yangi komponent yarating: `components` papkasida `Home.js` va `About.js`.

`Home.js`:
“`jsx
'react' dan React ni import qilish;

Bosh sahifa() funksiyasi {
qaytish (

);
}

standart Bosh sahifani eksport qilish;
""

`About.js`:
“`jsx
'react' dan React ni import qilish;

funktsiya About() {
qaytish (

);
}

eksport standarti Haqida;
""

Keyin, `App.js` ni oching va marshrutizatsiyani sozlang:

“`jsx
'react' dan React ni import qilish;
'react-router-dom' dan {BrowserRouter ni Router, Route, Link, Switch sifatida import qilish};
import './App.css';
'./components/HelloWorld' dan HelloWorld ni import qilish;
'./components/Home' dan Home ni import qilish;
'./components/About' dan About ni import qilish;

funksiya App() {
qaytish (

);
}

standart ilovani eksport qilish;
""

Shu bilan biz ilovamizdagi turli sahifalar o'rtasida asosiy navigatsiyani qo'shdik.

Yopish

Bu React.js yordamida veb-ilova yaratish bo'yicha asosiy qo'llanma . Biz loyihani sozlash, komponentlarni yaratish, holatni boshqarish, uslublash va marshrutizatsiyani ko'rib chiqdik. React.js sizga murakkabroq veb-ilovalarni yaratishda yordam beradigan ko'plab kutubxonalar va vositalarga ega boy ekotizimga ega.

Omad tilayman va umid qilamanki, ushbu qo'llanma sizga React.js bilan sayohatingizni boshlashga yordam beradi!