Дастури таълимӣ оид ба эҷоди барномаи веб бо истифода аз React.js

React.js як китобхонаи маъруфи таҳияи фронтенд аст, ки барои сохтани интерфейсҳои корбарии интерактивӣ (UI) истифода мешавад. React.js, ки аз ҷониби Facebook таҳия шудааст, аз ҷониби бисёр ширкатҳои бузург, аз ҷумла Instagram, Airbnb ва WhatsApp истифода шудааст. Агар шумо хоҳед, ки барномаҳои веби муассир, зуд ва вокунишӣ эҷод кунед, React.js метавонад интихоби дуруст барои шумо бошад.

Пендахулуан

Пеш аз оғози кор, боварӣ ҳосил кунед, ки дар компютери шумо Node.js ва npm (Node Package Manager) насб карда шудаанд. Node.js ва npm муҳиманд, зеро онҳо муҳит ва абзорҳои заруриро барои таҳияи барномаҳои веб бо истифода аз React.js фароҳам меоранд.

Қадами 1: Оғоз кардани лоиҳаи React

Барои эҷоди барномаи нави React.js, мо метавонем Create React App-ро истифода барем, ки як абзори эҷоди барнома аст, ки конфигуратсияи ибтидоиро ба ҳадди ақалл мерасонад. Фармони зеринро дар терминал ё сатри фармон иҷро кунед:

"`баш
npx create-react-app my-app
CD-барномаи ман
npm оғоз
""

Ин фармон директорияи наверо бо номи `my-app` эҷод мекунад, ҳамаи вобастагиҳои заруриро зеркашӣ ва насб мекунад ва сервери таҳияро оғоз мекунад. Акнун шумо метавонед браузерро кушоед ва ба `http://localhost:3000` ворид шавед, то барномаи пешфарзии React.js-ро бубинед.

Қадами 2: Сохтори ҷузвдон

Биёед ба сохтори ҷузвдонҳое, ки Create React App сохтааст, назар андозем:

""
барномаи ман/
├── node_modules/
├── оммавӣ/
│ └── index.html
── src/
├── Барнома.css
├── Барнома.js
├── App.test.js
├── index.css
├── index.js
── логотип.svg
""

– `node_modules/`: Ҳамаи вобастагиҳои лоиҳаи шуморо дар бар мегирад.
– `public/`: Файлҳои статикӣ, аз ҷумла `index.html`-ро дар бар мегирад, ки нуқтаи вуруди барнома мебошад.
– `src/`: Ҷое, ки шумо аксари вақти худро мегузаронед. Компонентҳои React, файлҳои CSS ва дигар дороиҳоро дар бар мегирад.

Қадами 3: Файлҳои нолозимро нест кунед

Барои оғоз бо варақи тоза, биёед баъзе файлҳои нолозимро нест кунем. `logo.svg` ва `App.test.js`-ро дар дохили ҷузвдони `src/` нест кунед. Сипас, `App.css` ва `index.css`-ро кушоед ва ҳамаи рамзи CSS-ро дар дохили онҳо нест кунед, то бо варақаи услуби тоза оғоз кунед.

Қадами 4: Эҷоди аввалин ҷузъи шумо

React.js бар асоси компонентҳо сохта шудааст. Компонентҳо блокҳои асосии барномаи веби шумо мебошанд. Биёед `App.js`-ро тағир диҳем, то аввалин компоненти худро эҷод кунем.

Файли src/App.js-ро кушоед ва онро бо рамзи зерин иваз кунед:

"`jsx
ворид кардани React аз 'react';
воридот './App.css';

функсияи Барнома() {
бозгашт (

);
}

содироти барномаи пешфарз;
""

Коди React-ро дар дохили `App.js` бо истифода аз JSX (JavaScript XML) оғоз кунед, ки ба мо имкон медиҳад синтаксиси монанд ба HTML-ро дар дохили JavaScript нависем. Тағиротҳои худро захира кунед ва натиҷаҳоро дар браузери худ бубинед.

Қадами 5: Илова кардани ҷузъҳои нав

Акнун биёед якчанд ҷузъҳои нав илова кунем. Дар дохили ҷузвдони `src` ҷузвдони наве бо номи `components` эҷод кунед. Сипас, дар ҷузвдони `components` файли нави `HelloWorld.js` эҷод кунед.

"`jsx
ворид кардани React аз 'react';

функсияи HelloWorld() {
бозгашт (

);
}

содироти пешфарзии HelloWorld;
""

Файли `App.js`-ро кушоед ва ҷузъи `HelloWorld`-ро, ки мо нав сохтаем, ворид кунед:

"`jsx
ворид кардани React аз 'react';
воридот './App.css';
ворид кардани HelloWorld аз './components/HelloWorld';

функсияи Барнома() {
бозгашт (

);
}

содироти барномаи пешфарз;
""

Акнун, `App.js` компоненти `HelloWorld`-ро дар саҳифаи асосӣ нишон медиҳад.

Қадами 6: Илова кардани Идоракунии Ҳолат бо useState

React дорои қалмоқҳои хеле пурқувват барои идоракунии ҳолат мебошад. Биёед ба барномаи худ ягон ҳолат илова кунем. Масалан, биёед ҳисобкунакеро илова кунем, ки ҳар дафъае, ки тугма пахш карда мешавад, зиёд мешавад.

`HelloWorld.js`-ро кушоед ва state ва `useState`-ро илова кунед:

"`jsx
ворид кардани React, {useState} аз 'react';

функсияи HelloWorld() {
const [шумора, setCount] = useState(0);

const инкрементШумораи = () => {
setCount(шумора + 1);
}

бозгашт (

);
}

содироти пешфарзии HelloWorld;
""

Ҳолати `count` бо арзиши 0 оғоз карда мешавад ва ҳар дафъае, ки тугма пахш карда мешавад, функсияи `incrementCount` ин арзишро зиёд мекунад.

Қадами 7: Илова кардани ороиш

Барои илова кардани услуб, мо метавонем CSS-ро дар файли `App.css` истифода барем ё метавонем китобхонаи CSS-in-JS-ро ба монанди styled-components истифода барем. Биёед ҳоло бо CSS-и стандартӣ бимонем.

`App.css`-ро кушоед ва каме услуб илова кунед:

"`css
.App {
мувофиқ кардани матн: марказ;
}

Сарлавҳаи .App {
ранги пасзамина: 282c34;
баландии ҳадди ақал: 100vh;
намоиш: flex;
самти чандир: сутун;
ҳамвор кардани ашё: марказ;
асоснок кардани мазмун: марказ;
андозаи шрифт: calc(10px + 2vmin);
ранг: сафед;
}

тугма {
андова: 10px 20px;
margin-top: 20px;
Андозаи ҳарф: 16px;
}
""

Қадами 8: Илова кардани маршрутизатсия бо React Router

Барои илова кардани паймоиш байни саҳифаҳои гуногун дар барномаи худ, мо метавонем аз React Router истифода барем. React Router-ро бо иҷро кардани фармони зерин насб кунед:

"`баш
npm насб кардани react-router-dom
""

Сипас, ду ҷузъи нав эҷод кунед: `Home.js` ва `About.js` дар ҷузвдони `components`.

`Home.js`:
"`jsx
ворид кардани React аз 'react';

функсияи Home() {
бозгашт (

);
}

содироти пешфарзи хона;
""

`Дар бораи.js`:
"`jsx
ворид кардани React аз 'react';

функсия Дар бораи () {
бозгашт (

);
}

содироти пешфарз Дар бораи;
""

Баъдан, `App.js`-ро кушоед ва роҳнамоиро танзим кунед:

"`jsx
ворид кардани React аз 'react';
ворид кардани {BrowserRouter ҳамчун Router, Route, Link, Switch} аз 'react-router-dom';
воридот './App.css';
ворид кардани HelloWorld аз './components/HelloWorld';
воридоти Home аз './components/Home';
воридот дар бораи аз './components/About';

функсияи Барнома() {
бозгашт (

);
}

содироти барномаи пешфарз;
""

Бо ин, мо дар барномаи худ паймоиши асосиро байни саҳифаҳои гуногун илова кардем.

Penutup

Ин як дастури асосӣ барои эҷоди барномаи веб бо истифода аз React.js мебошад. Мо танзимоти лоиҳа, эҷоди ҷузъҳо, идоракунии ҳолат, услубсозӣ ва масиркуниро баррасӣ кардем. React.js дорои экосистемаи бой бо китобхонаҳо ва абзорҳои сершумор мебошад, ки метавонанд ба шумо дар сохтани барномаҳои мураккабтари веб кӯмак расонанд.

Барори кор ва умедворам, ки ин дастур ба шумо дар оғози сафаратон бо React.js кӯмак мекунад!