Udhëzues Hyrës për React: Ndërtoni Ndërfaqen Tuaj të Parë të Përdoruesit nga Zero në Një

React është një bibliotekë JavaScript për ndërtimin e ndërfaqeve të përdoruesit. Është zhvilluar dhe mirëmbahet nga Facebook, dhe është bërë një nga mjetet më të njohura në zhvillimin frontend. Ky udhëzues do t'ju udhëzojë nga zeroja, hap pas hapi, për të kuptuar konceptet bazë të React dhe për të ndërtuar një ndërfaqe të thjeshtë përdoruesi.

Pse të zgjidhni React?

React ka avantazhet e mëposhtme:

• Komponentizimi: React e ndan ndërfaqen e përdoruesit në komponente të pavarura dhe të ripërdorshme. Kjo e bën kodin më të lehtë për t'u mirëmbajtur dhe kuptuar.
• Deklarative: React përdor një stil programimi deklarativ, që do të thotë se ju vetëm duhet të përshkruani atë që dëshironi të paraqitet, dhe React do të trajtojë automatikisht përditësimet dhe renderimin.
• Efikase: React përdor DOM virtual dhe algoritme inteligjente diff, të cilat mund të përditësojnë në mënyrë efikase ndërfaqen e përdoruesit, duke reduktuar renderimin e panevojshëm.
• Mbështetje e madhe e komunitetit: React ka një komunitet të madh dhe një ekosistem të pasur, ku mund të gjeni shumë tutoriale, biblioteka dhe mjete për t'ju ndihmuar në zhvillim.
• Aftësi ndër-platformë: React Native ju lejon të përdorni React për të zhvilluar aplikacione mobile native (iOS dhe Android).

Përgatitja

Përpara se të filloni, duhet të siguroheni që keni instaluar mjetet e mëposhtme në kompjuterin tuaj:

• Node.js: Node.js është një mjedis ekzekutimi JavaScript, i cili përdoret për të ekzekutuar mjetet e zhvillimit të React. Mund ta shkarkoni dhe instaloni nga https://nodejs.org/.
• npm ose yarn: npm (Node Package Manager) dhe yarn janë menaxherë paketash JavaScript, të cilët përdoren për të instaluar dhe menaxhuar varësitë e React. Zakonisht npm instalohet së bashku me Node.js. yarn mund të instalohet nga https://yarnpkg.com/.

Krijoni Aplikacionin Tuaj të Parë React

Ne do të përdorim create-react-app për të krijuar shpejt një projekt React.

1. Krijoni duke përdorur npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Krijoni duke përdorur yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Pasi të ekzekutoni komandat e mësipërme, create-react-app do të krijojë automatikisht një direktori të quajtur my-first-react-app dhe do të inicializojë një projekt React në atë direktori. Komanda npm start ose yarn start do të nisë serverin e zhvillimit, dhe ju mund të vizitoni http://localhost:3000 në shfletuesin tuaj për të parë aplikacionin tuaj React.

Struktura e Drejtorisë

Struktura e drejtorisë së projektit të krijuar nga create-react-app është si më poshtë:

my-first-react-app/
├── node_modules/         # Bibliotekat e varësive të projektit
├── public/               # Burime statike (p.sh., skedarë HTML)
│   ├── index.html        # Skedari hyrës HTML i aplikacionit
│   └── ...
├── src/                  # Kodi burimor React
│   ├── App.css           # Stilet CSS të komponentit App
│   ├── App.js            # Komponenti App
│   ├── App.test.js       # Skedari i testit të komponentit App
│   ├── index.css         # Stilet globale CSS
│   ├── index.js          # Skedari hyrës JavaScript i aplikacionit
│   ├── logo.svg          # Logoja e React
│   └── ...
├── .gitignore            # Skedari i injorimit të Git
├── package.json          # Metadatat dhe varësitë e projektit
├── README.md             # Dokumentacioni i projektit
└── yarn.lock             # Skedari i kyçjes së versionit të varësive (nëse përdoret yarn)

Kuptimi i Komponentëve React

Aplikacionet React janë të ndërtuara nga komponentë. Komponentët janë blloqe kodi të pavarur dhe të ripërdorshëm që përdoren për të paraqitur pjesë specifike të ndërfaqes së përdoruesit.

Në skedarin src/App.js, mund të shihni një komponent të parazgjedhur App:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Shpjegimi i kodit:

• import React from 'react'; Importon bibliotekën React.
• function App() { ... } Përcakton një komponent funksional të quajtur App.
• return ( ... ) Kthen një shprehje JSX që përshkruan atë që duhet të paraqesë komponenti.
• export default App; Eksporton komponentin App në mënyrë që të mund të përdoret në skedarë të tjerë.

JSX (JavaScript XML)

JSX është një zgjerim i sintaksës JavaScript që ju lejon të shkruani kod të ngjashëm me HTML në kodin JavaScript. Në shembullin e mësipërm, ... është një shprehje JSX. Kodi JSX do të konvertohet në kod standard JavaScript nga Babel, në mënyrë që shfletuesi ta kuptojë atë.

Modifikimi i Komponentit App

Le të modifikojmë komponentin App për të krijuar një numërues të thjeshtë.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Numërues

      Numërimi aktual: {count}

      +
      -
    
  );
}

export default App;

Shpjegime të modifikimeve:

• import React, { useState } from 'react'; Importon Hook-un useState. useState është një React Hook, i cili përdoret për të shtuar gjendje në komponentët funksionalë.
• const [count, setCount] = useState(0); Përdor Hook-un useState për të krijuar një variabël gjendjeje të quajtur count, dhe e inicializon atë në 0. setCount është një funksion për të përditësuar gjendjen count.
• const increment = () => { setCount(count + 1); }; Përcakton një funksion të quajtur increment, i cili përdoret për të rritur gjendjen count me 1.
• const decrement = () => { setCount(count - 1); }; Përcakton një funksion të quajtur decrement, i cili përdoret për të zvogëluar gjendjen count me 1.
• Numërimi aktual: {count} Shfaq vlerën e gjendjes count në faqe. {count} është një shprehje JSX, e cila përdoret për të futur variabla JavaScript në kodin JSX.
• + dhe - krijojnë dy butona, të cilët lidhen me funksionet increment dhe decrement përkatësisht. onClick është një trajtuar ngjarjesh, i cili përdoret për të ekzekutuar funksionin e specifikuar kur butoni klikohet.

Pasi të ruani skedarin src/App.js, shfletuesi do të rifreskohet automatikisht dhe do të shihni një numërues të thjeshtë. Klikimi i butonit "+" do të rrisë numërimin, dhe klikimi i butonit "-" do të zvogëlojë numërimin.

Përdorimi i stileve CSS

Mund të përdorni CSS për të zbukuruar aplikacionin tuaj React. create-react-app mbështet CSS Modules dhe skedarët e zakonshëm CSS.

Përdorimi i CSS Modules:

CSS Modules ju lejon të krijoni stile CSS të pavarura për çdo komponent, duke shmangur konfliktet e stilit. Për të përdorur CSS Modules në një komponent, duhet të krijoni një skedar që përfundon me .module.css.

Për shembull, krijoni një skedar të quajtur App.module.css dhe shtoni stilet e mëposhtme CSS në të:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Më pas, importoni CSS Modules në skedarin src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importo CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Përdorni objektin styles për të referuar klasat CSS */}
      

# Numëratori

      Numërimi aktual: {count}

      +
      -
    
  );
}

export default App;

Përdorimi i një skedari të thjeshtë CSS:

Mund të përdorni gjithashtu një skedar të thjeshtë CSS për të përcaktuar stilet globale. Në skedarin src/index.css, mund të përcaktoni stilet globale.

Për shembull, shtoni stilin e mëposhtëm CSS:

body {
  font-family: sans-serif;
}

Ky stil do të aplikohet në elementin body të të gjithë aplikacionit.

Hapi tjetër

Përgëzime, keni përfunduar aplikacionin tuaj të parë React! Më pas, mund të mësoni më shumë rreth React, si p.sh.:

• Komunikimi i komponentëve: Mësoni se si të komunikojnë komponentët e ndryshëm me njëri-tjetrin.
• Trajtimi i formularëve: Mësoni se si të krijoni dhe trajtoni formularë.
• Rutimi: Mësoni se si të përdorni React Router për të krijuar aplikacione me shumë faqe.
• Redux ose Context API: Mësoni se si të menaxhoni gjendjen e aplikacionit.
• Hooks: Mësoni më shumë rreth React Hooks, si p.sh. useEffect, useContext, etj.

Mbani mend, React është një teknologji që kërkon praktikë dhe mësim të vazhdueshëm. Ju uroj mësim të këndshëm!