Tutorial mbi Krijimin e një Aplikacioni Web duke përdorur React.js

React.js është një bibliotekë e njohur zhvillimi front-end që përdoret për të ndërtuar ndërfaqe përdoruesi interaktive (UI). I zhvilluar nga Facebook, React.js është përdorur nga shumë kompani të mëdha, duke përfshirë Instagram, Airbnb dhe WhatsApp. Nëse po kërkoni të ndërtoni aplikacione web efektive, të shpejta dhe që i përgjigjen nevojave tuaja, React.js mund të jetë zgjedhja e duhur për ju.

Pendahuluan

Para se të fillojmë, sigurohuni që keni instaluar Node.js dhe npm (Node Package Manager) në kompjuterin tuaj. Node.js dhe npm janë thelbësorë sepse ofrojnë mjedisin dhe mjetet e nevojshme për të zhvilluar aplikacione web duke përdorur React.js.

Hapi 1: Inicializimi i Projektit React

Për të krijuar një aplikacion të ri React.js, mund të përdorim Create React App, një mjet krijimi aplikacionesh që minimizon konfigurimin fillestar. Ekzekutoni komandën e mëposhtme në terminalin ose në vijën e komandës:

"`bash
npx create-reaction-app my-app
cd my-app
npm fillimi
""

Kjo komandë do të krijojë një direktori të re me emrin `my-app`, do të shkarkojë dhe instalojë të gjitha varësitë e nevojshme dhe do të nisë serverin e zhvillimit. Tani mund të hapni një shfletues dhe të hyni në `http://localhost:3000` për të parë aplikacionin parazgjedhur React.js.

Hapi 2: Struktura e Dosjeve

Le të hedhim një vështrim në strukturën e dosjeve që ka krijuar Create React App:

""
aplikacioni-im/
├── module_nyje/
├── publik/
│ └── indeksi.html
└── src/
├── Aplikacion.css
├── App.js
├── App.test.js
├── indeks.css
├── indeks.js
└── logo.svg
""

– `node_modules/`: Përmban të gjitha varësitë e projektit tuaj.
– `public/`: Përmban skedarë statikë, duke përfshirë `index.html` që është pika hyrëse e aplikacionit.
– `src/`: Ku do të kaloni pjesën më të madhe të kohës suaj. Përmban komponentë React, skedarë CSS dhe asete të tjera.

Hapi 3: Fshirja e skedarëve të panevojshëm

Për të filluar nga e para, le të fshijmë disa skedarë të panevojshëm. Fshini `logo.svg` dhe `App.test.js` brenda dosjes `src/`. Pastaj, hapni `App.css` dhe `index.css`, duke fshirë të gjithë kodin CSS brenda tyre për të filluar me një fletë stili të pastër.

Hapi 4: Krijimi i Komponentit Tuaj të Parë

React.js bazohet në komponentë. Komponentët janë blloqet ndërtuese të aplikacionit tuaj web. Le të modifikojmë `App.js` për të krijuar komponentin tonë të parë.

Hapni `src/App.js` dhe zëvendësojeni atë me kodin e mëposhtëm:

“`jsx
import Reagon nga 'reagoj';
importo './App.css';

funksioni App() {
kthehu (

);
}

eksportoni aplikacionin e parazgjedhur;
""

Inicializoni kodin React brenda `App.js` duke përdorur JSX (JavaScript XML), i cili na lejon të shkruajmë sintaksë të ngjashme me HTML brenda JavaScript. Ruani ndryshimet tuaja dhe shikoni rezultatet në shfletuesin tuaj.

Hapi 5: Shtimi i Komponentëve të Rinj

Tani le të shtojmë disa komponentë të rinj. Krijoni një dosje të re të quajtur `components` brenda dosjes `src`. Pastaj krijoni një skedar të ri `HelloWorld.js` në dosjen `components`.

“`jsx
import Reagon nga 'reagoj';

funksioni HelloWorld() {
kthehu (

);
}

eksporto HelloWorld si parazgjedhje;
""

Hapni `App.js` dhe importoni komponentin `HelloWorld` që sapo krijuam:

“`jsx
import Reagon nga 'reagoj';
importo './App.css';
importo HelloWorld nga './components/HelloWorld';

funksioni App() {
kthehu (

);
}

eksportoni aplikacionin e parazgjedhur;
""

Tani, `App.js` renderon komponentin `HelloWorld` në faqen kryesore.

Hapi 6: Shtimi i Menaxhimit të Gjendjes me useState

React ka grepa shumë të fuqishëm për menaxhimin e gjendjes. Le t'i shtojmë aplikacionit tonë disa të dhëna për gjendjen. Për shembull, le të shtojmë një numërues që rritet sa herë që klikohet një buton.

Hapni `HelloWorld.js` dhe shtoni grepin state dhe `useState`:

“`jsx
importo React, { useState } nga 'react';

funksioni HelloWorld() {
const [numërim, setCount] = useState(0);

const incrementCount = () => {
setCount(numërim + 1);
}

kthehu (

);
}

eksporto HelloWorld si parazgjedhje;
""

Gjendja `count` inicializohet me një vlerë 0, dhe çdo herë që klikohet butoni, funksioni `incrementCount` do ta rrisë këtë vlerë.

Hapi 7: Shtimi i stilimit

Për të shtuar stilizim, mund të përdorim CSS në skedarin `App.css` ose mund të përdorim një bibliotekë CSS-in-JS si styled-components. Le të qëndrojmë te CSS standarde për momentin.

Hapni `App.css` dhe shtoni disa stilime:

“css
.Aplikacion {
text-align: qendra;
}

.App-header {
ngjyra e sfondit: 282c34;
lartësia minimale: 100vh;
shfaq: përkul;
flex-direction: kolonë;
pikat e rreshtit: qendra;
justify-content: qendër;
madhësia-e-fonteve: calc(10px + 2vmin);
ngjyra: e bardhe;
}

buton {
mbushje: 10px 20px;
diferencë e sipërme: 20px;
madhësia e shkronjave: 16px;
}
""

Hapi 8: Shtimi i Rrugëzimit me React Router

Për të shtuar navigimin midis faqeve të ndryshme në aplikacionin tonë, mund të përdorim React Router. Instaloni React Router duke ekzekutuar komandën e mëposhtme:

"`bash
npm instaloni react-router-dom
""

Pastaj, krijoni dy komponentë të rinj: `Home.js` dhe `About.js` në dosjen `components`.

`Home.js`:
“`jsx
import Reagon nga 'reagoj';

funksioni Home() {
kthehu (

);
}

eksporto faqen kryesore të parazgjedhur;
""

`Rreth.js`:
“`jsx
import Reagon nga 'reagoj';

funksioni Rreth() {
kthehu (

);
}

eksporto parazgjedhur Rreth;
""

Pastaj, hapni `App.js` dhe konfiguroni rrugëzimin:

“`jsx
import Reagon nga 'reagoj';
importo { BrowserRouter si Router, Route, Link, Switch } nga 'react-router-dom';
importo './App.css';
importo HelloWorld nga './components/HelloWorld';
importo Home nga './components/Home';
importo "Rreth" nga './components/Rreth';

funksioni App() {
kthehu (

);
}

eksportoni aplikacionin e parazgjedhur;
""

Me këtë, ne kemi shtuar navigimin bazë midis faqeve të ndryshme në aplikacionin tonë.

Penutup

Ky është një tutorial bazë për krijimin e një aplikacioni web duke përdorur React.js. Ne kemi trajtuar konfigurimin e projektit, krijimin e komponentëve, menaxhimin e gjendjes, stilimin dhe rrugëzimin. React.js ka një ekosistem të pasur me biblioteka dhe mjete të shumta që mund t'ju ndihmojnë të ndërtoni aplikacione web më komplekse.

Paç fat dhe shpresoj që ky tutorial të të ndihmojë të fillosh udhëtimin tënd me React.js!