Dersa Çêkirina Serlêdanek Webê Bi Bikaranîna React.js

React.js pirtûkxaneyek pêşvebirina pêş-end a populer e ku ji bo avakirina navrûyên bikarhêner ên înteraktîf (UI) tê bikar anîn. React.js ku ji hêla Facebookê ve hatî pêşve xistin, ji hêla gelek pargîdaniyên mezin ve, di nav de Instagram, Airbnb, û WhatsApp, hatiye bikar anîn. Ger hûn dixwazin serîlêdanên webê yên bibandor, bilez û bersivkar ava bikin, React.js dibe ku ji bo we hilbijartina rast be.

Pendahuluan

Berî ku em dest pê bikin, pê ewle bin ku Node.js û npm (Node Package Manager) li ser komputerê we sazkirî ne. Node.js û npm pir girîng in ji ber ku ew hawîrdor û amûrên pêwîst ji bo pêşxistina sepanên webê bi karanîna React.js peyda dikin.

Gava 1: Destpêkirina Projeya React

Ji bo afirandina serîlêdanek nû ya React.js, em dikarin Create React App bikar bînin, ku amûrek afirandina serîlêdanê ye ku mîhengkirina destpêkê kêm dike. Fermana jêrîn di termînala xwe an rêza fermanê de bimeşînin:

“`bash
npx create-react-app-my-app
cd my-app
npm dest pê dike
""

Ev ferman dê peldankek nû bi navê `my-app` biafirîne, hemî girêdayîbûnên pêwîst dakêşîne û saz bike, û servera pêşveçûnê bide destpêkirin. Naha hûn dikarin gerokek vekin û bigihîjin `http://localhost:3000` da ku hûn sepana React.js ya xwerû bibînin.

Gava 2: Pêkhateya Peldankê

Werin em li avahiya peldankê ya ku Create React App çêkiriye binêrin:

""
sepanê-min/
├── modulên_girêk/
├── giştî/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Hemû girêdayîbûnên projeya we dihewîne.
– `public/`: Pelên statîk dihewîne, tevî `index.html` ku xala têketina sepanê ye.
– `src/`: Cihê ku hûn ê piraniya dema xwe lê derbas bikin. Pêkhateyên React, pelên CSS, û hebûnên din dihewîne.

Gava 3: Jêbirina Pelên Nehewce

Ji bo destpêkirina bi peldankek paqij, em hin pelên nehewce jê bibin. `logo.svg` û `App.test.js` di nav peldanka `src/` de jê bibin. Piştre, `App.css` û `index.css` vekin, hemî kodên CSS-ê yên di nav wan de jê bibin da ku bi peldankek şêwazê ya paqij dest pê bikin.

Gava 4: Afirandina Pêkhateya We ya Yekem

React.js li ser pêkhateyan hatiye avakirin. Pêkhate blokên avahiyê yên serîlêdana we ya webê ne. Werin em `App.js` biguherînin da ku pêkhateya me ya yekem biafirînin.

`src/App.js` veke û bi koda jêrîn biguherîne:

"`jsx
import React ji 'react';
import './App.css';

fonksiyona App() {
vegere (

);
}

hinardekirina sepana xwerû;
""

Koda React-ê di hundirê `App.js` de bi karanîna JSX (JavaScript XML) destpê bike, ku dihêle em di hundirê JavaScript-ê de rêzimanek mîna HTML-ê binivîsin. Guhertinên xwe tomar bike û encaman di geroka xwe de bibîne.

Gava 5: Zêdekirina Pêkhateyên Nû

Niha em çend pêkhateyên nû lê zêde bikin. Di hundirê peldanka `src` de peldankek nû bi navê `components` biafirînin. Piştre pelek nû `HelloWorld.js` di peldanka `components` de biafirînin.

"`jsx
import React ji 'react';

fonksiyona HelloWorld() {
vegere (

);
}

îxracata xwerû ya HelloWorld;
""

`App.js` veke û pêkhateya `HelloWorld` ya ku me nû çêkiriye import bike:

"`jsx
import React ji 'react';
import './App.css';
HelloWorld ji './components/HelloWorld' import bike;

fonksiyona App() {
vegere (

);
}

hinardekirina sepana xwerû;
""

Niha, `App.js` pêkhateya `HelloWorld` li ser rûpela sereke nîşan dide.

Gava 6: Zêdekirina Rêvebiriya Dewletê bi useState re

React xwedî çengelên pir bihêz e ji bo birêvebirina rewşê. Werin em hinek rewşê li serlêdana xwe zêde bikin. Mînakî, werin em hejmartinek lê zêde bikin ku her ku bişkokek tê tikandin zêde dibe.

`HelloWorld.js` veke û state û çengela `useState` lê zêde bike:

"`jsx
React, { useState } ji 'react' import bike;

fonksiyona HelloWorld() {
const [hejmar, setCount] = useState(0);

const incrementCount = () => {
danînaHejmar(hejmar + 1);
}

vegere (

);
}

îxracata xwerû ya HelloWorld;
""

Rewşa `count` bi nirxek 0 tê destpêkirin, û her cara ku bişkok tê klîkkirin, fonksiyona `incrementCount` dê vê nirxê zêde bike.

Gava 7: Zêdekirina Şêwazkirinê

Ji bo lêzêdekirina şêwazkirinê, em dikarin CSS-ê di pelê `App.css` de bikar bînin an jî em dikarin pirtûkxaneyek CSS-di-JS-ê de wekî styled-components bikar bînin. Werin em niha bi CSS-ya standard ve girêdayî bimînin.

`App.css` veke û hinek şêwaz lê zêde bike:

"css"
.App {
text-align: center;
}

.Sernivîsa-serî {
rengê-paşxaneyê: 282c34;
bilindahiya herî kêm: 100vh;
nîşan bide: flex;
flex-direction: column;
align-item: center;
justify-content: navend;
mezinahiya-fontê: calc (10px + 2vmin);
reng: spî;
}

bişkok {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
""

Gav 8: Zêdekirina Rêvekirinê bi React Router re

Ji bo zêdekirina navîgasyonê di navbera rûpelên cuda de di sepanê me de, em dikarin React Router bikar bînin. React Router bi xebitandina fermana jêrîn saz bikin:

“`bash
npm saz bike react-router-dom
""

Piştre, du pêkhateyên nû biafirîne: `Home.js` û `About.js` di peldanka `components` de.

`Home.js`:
"`jsx
import React ji 'react';

fonksiyona Malê() {
vegere (

);
}

hinardekirina xwerû ya Malê;
""

`Derbarê.js`:
"`jsx
import React ji 'react';

fonksiyon Derbarê() {
vegere (

);
}

hinardekirina xwerû ya der barê;
""

Piştre, `App.js` veke û rêwerzê saz bike:

"`jsx
import React ji 'react';
import { BrowserRouter wek Router, Route, Link, Switch } ji 'react-router-dom';
import './App.css';
HelloWorld ji './components/HelloWorld' import bike;
Malê ji './components/Home' import bike;
Derbarê ji './components/About' import bike;

fonksiyona App() {
vegere (

);
}

hinardekirina sepana xwerû;
""

Bi vê yekê, me navîgasyona bingehîn di navbera rûpelên cûda de di sepanê xwe de zêde kiriye.

Penutup

Ew dersa bingehîn e ji bo afirandina serîlêdanek webê bi karanîna React.js. Me sazkirina projeyê, afirandina pêkhateyan, rêveberiya rewşê, şêwazkirin û rêwerzkirinê vegotiye. React.js xwedî ekosîstemek dewlemend e ku gelek pirtûkxane û amûr hene ku dikarin ji we re bibin alîkar ku hûn serîlêdanên webê yên tevlihevtir ava bikin.

Serkeftin ji te re, û ez hêvî dikim ku ev ders alîkariya te bike ku tu di rêwîtiya xwe ya bi React.js re dest pê bikî!