Një udhëzues hap pas hapi për të zotëruar React

Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning React është një mënyrë fantastike për të ndërtuar ndërfaqe përdoruesi interaktive dhe dinamike për aplikacionet në ueb. Nëse je një fillestar që merr pjesë në zhvillimin e uebit ose një zhvillues me përvojë që kërkon të zgjerojë grupin e aftësive të tua, ky artikull do t'ju çojë në rrugëtimin e krijimit të aplikacioneve React dhe të kuptuarit e koncepteve thelbësore të React.

PËRMBAJTJA

• Prezantimi
• Parakushtet
• npm vs npx
• Vendosja e një projekti të ri duke përdorur aplikacionin Create React
• Përdorimi bazë
• Komponentët e Reagimit: Komponentët e Funksionit dhe Komponentët e Klasës
• Styling React Komponentët
• Reagojnë Hooks
• Variablat dhe mbështetësit
• Listat dhe interpretimi i kushtëzuar
• JSX
• Burimet
• konkluzioni

Prezantimi

React (i njohur gjithashtu si React.js ose ReactJS) është një bibliotekë JavaScript e përparme falas dhe me burim të hapur e zhvilluar nga Meta (më parë Facebook ) dhe një komunitet zhvilluesish. React është bërë një nga bibliotekat më të njohura JavaScript për ndërtimin e ndërfaqeve të përdoruesit. React mund të përdoret për të ndërtuar aplikacione interaktive dhe të përgjegjshme me një faqe dhe aplikacione celulare ose të prodhuara nga serveri me korniza si Next.js.

Parakushtet

Përpara se të zhyteni në zhvillimin e React, ka disa koncepte thelbësore që duhet të dini përpara se të filloni të mësoni React.

• Kuptimi bazë i HTML & CSS.
• Eksperiencë e ndërmjetme në JavaScript.
• Instaluar Node.js dhe npm në kompjuterin tuaj globalisht.

npm vs npx

NPM qëndron për Node Package Manager dhe është menaxheri i paracaktuar i paketave për Node.js. Npm është një mjet instalimi i paketës.

NPX qëndron për Node Package Execute dhe është një mjet për ekzekutimin e paketave. Është një ekzekutues i paketave npm që mund të ekzekutojë çdo paketë nga regjistri npm pa e instaluar atë paketë.

nëse përdorni npm, fillimisht duhet të instaloni mjetin create-react-appnë vend përpara se të përdorni create-react-apppër të krijuar aplikacionin. Paketat e përdorura nga npm janë instaluar globalisht.

npm install -g create-react-app
create-react-app my_react-app
cd my_reat-app
npm start

npx ju lejon të ekzekutoni kodin "create-react-app" pa e shkarkuar më parë projektin. Një paketë mund të ekzekutohet pa instaluar paketën.

npx create-react-app my_react_app
cd my_react_app
npm start

Vendosja e një projekti të ri duke përdorur aplikacionin Create React

Mjeti create-react-appështë një mënyrë e mbështetur zyrtarisht për të krijuar aplikacione React. create-react-app do të konfigurojë gjithçka që ju nevojitet për të ekzekutuar një aplikacion React. Për të përdorur aplikacionin create-react, duhet të keni të instaluar Node.js. Nëse nuk është i instaluar në kompjuterin tuaj, "instaloni". Rekomandohet që të përdorni versionin e mbështetjes afatgjatë (LTS).

• Ekzekutoni këtë komandë për të krijuar një aplikacion React të quajtur my_react_app

npx create-react-app my_react_app

• Ekzekutoni këtë komandë për të kaluar në direktorinë my_react_app (drejtoria e aplikacioneve)

cd my_react_app

• Ekzekutoni këtë komandë për të ekzekutuar aplikacionin React my_react_app

npm start

Shënim: Brenda atij drejtoria të aplikacionit, mund të ekzekutoni disa komanda:

• fillimi npm
  Nis serverin e zhvillimit.
• ndërtimi i ekzekutimit npm
  E bashkon aplikacionin në skedarë statikë për prodhim.
• testi npm
  Nis testin.
• npm ekzekutimi i nxjerrjes
  Heq këtë mjet dhe kopjon varësitë e ndërtimit, skedarët e konfigurimit
  dhe skriptet në drejtorinë e aplikacionit. Nëse e bëni këtë, nuk mund të ktheheni!

Ky është rezultati përfundimtar:

Struktura e aplikacionit: Creative-react-app na jep gjithçka që na nevojitet për të zhvilluar një aplikacion React. Në një aplikacion React, struktura fillestare e skedarit zakonisht përfshin:

├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Përdorimi bazë

Këtu janë shembuj bazë të përdorimit të React për ueb, të shkruar në JSX dhe JavaScript:

/** App.js file */
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Edit src/App.js and save to reload.</h1>
      <h1>Learn React</h1>
    </div>
  );
}
/** Index.js file */
/** React application is rendered to a root element in the HTML page */
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
<!-- index.html file
React application is built based on the following HTML document
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

Komponentët e Reagimit: Komponentët e Funksionit dhe Komponentët e Klasës

Një komponent React është një bllok ndërtimi i ripërdorshëm, i pavarur që përcakton strukturën e një pjese specifike të një ndërfaqeje përdoruesi. Komponentët mund të jenë funksionalë ose të bazuar në klasë dhe janë në thelb të arkitekturës së bazuar në komponentë të React. Komponentët jepen në një element rrënjë në DOM duke përdorur bibliotekën React DOM.

Dy mënyrat kryesore të deklarimit të komponentëve në React janë komponentët e funksionit dhe komponentët e klasës. Në bazat më të vjetra të kodit React, mund të gjeni komponentë të klasës të përdorura kryesisht. Komponentët e funksionit, së bashku me Hooks, janë bërë qasja e rekomanduar për ndërtimin e aplikacioneve React të cilat u prezantuan në React 16.8.

Komponenti i funksionit

Komponentët e funksionit deklarohen me një funksion (duke përdorur sintaksën e funksionit JavaScript ose një shprehje të funksionit me shigjetë) që pranon një argument të vetëm "props" dhe kthen JSX.

Më poshtë është një shembull i një komponenti funksioni në React,

// Function Syntax
function App() {
  return (
    <div>
      <h1>Welcome to My React App!</h1>
      <p>Let's start building amazing things.</p>
    </div>
  );
}

// Arrow function expression
const App = () => {
  return (
    <div>
      <h1>Welcome to My React App!</h1>
      <p>Let's start building amazing things.</p>
    </div>
  );
};

Duke dhënë një komponent

Tani aplikacioni juaj React ka një komponent të quajtur App, i cili kthen një element ‹h1› dhe ‹p›. Për të përdorur këtë komponent në aplikacionin tuaj, përdorni një sintaksë të ngjashme si HTML-ja normale: ‹App /›

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Përbërësit e futur

React ju lejon të futni një komponent në një tjetër, duke lejuar krijimin e ndërfaqeve komplekse të përdoruesit.

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

/** Nested component */
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Vini re se ‹MyButton /› fillon me një shkronjë të madhe. Kjo është mënyra për të identifikuar një komponent React. Komponentët React duhet të fillojnë gjithmonë me shkronjë të madhe sepse React i trajton komponentët që fillojnë me shkronjë të vogël si elementë të rregullt HTML. Duke përdorur një shkronjë të madhe për emrat e komponentëve, React mund të bëjë dallimin midis komponentëve të personalizuar dhe elementëve të integruar HTML, duke siguruar paraqitjen dhe sjelljen e duhur në aplikacion.

Në kodin e mësipërm, MyButton dhe MyApp janë të dy komponentë React. MyButton thirret brenda komponentit MyApp. Mund të deklaroni shumë komponentë në një skedar ose skedarë të ndryshëm dhe të thërrisni sa më shumë komponentë të ndryshëm në një komponent.

Komponentët e klasës

Komponentët e klasës deklarohen duke përdorur klasat ES6. Komponentët e klasës në React sillen në mënyrë të ngjashme me komponentët e funksionit. Megjithatë, në vend që të përdorin Hooks, komponentët e klasës përdorin metodat e ciklit jetësor të ofruara nga React për të menaxhuar gjendjen e komponentit dhe ngjarjet e ciklit jetësor, ata përdorin metodat e ciklit të jetës në klasën bazë React.Component. Kur krijoni një komponent të klasës në React, ju zgjeroni klasën bazë React.Component, e cila lejon komponentin tuaj të trashëgojë dhe të përdorë funksionalitetet dhe metodat e ciklit jetësor të ofruara nga React.Component, duke ju mundësuar të kontrolloni dhe menaxhoni gjendjen e komponentit, mbështetësit, dhe sjellje në mënyrë efektive.

Në një komponent të klasës, metoda render() është një kërkesë e detyrueshme, kjo metodë kthen HTML.

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Styling React Components

Ka qasje të ndryshme për stilimin e komponentëve React me CSS

1. Stilim i brendshëm

Kur aplikoni stile inline në një element React duke përdorur atributin style, vlera duhet të jetë një objekt JavaScript që përmban çifte vlera-çelësku çelësat përfaqësojnë vetitë CSS dhe vlerat përfaqësojnë stilet përkatëse në formatin camelCase .

const App = () => {
  return (
    <div>
      <h1 style={{ color: "white",
          background: "blue",
          padding: "10px", 
          width: "200px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "10px"
      }}>Welcome</h1>
      <h2 style={{ color: "red", alignItems: "center" }}>React is fun!</h2>
    </div>
  )
  };

export default App;

Në këtë shembull, kllapat e para kaçurrelë { } përdoren për të shtuar shprehjen JavaScript me sintaksë HTML. Stilet që kalohen kalohen si fjalë për fjalë objekt direkt brenda kodit JSX.

Çdo deklaratë përfshin një emër të pronës CSS dhe një vlerë (emri: vlerë çift), të ndara me një dy pika. Për të përfshirë deklarata të shumta CSS, ju i ndani ato me pikëpresje dhe i gjithë blloku i stilit mbyllet brenda kllapave kaçurrelë {}.

Shënim Vetitë CSS duhet të shkruhen në sintaksë CamelCase, ku fjala e parë është me shkronja të vogla dhe fjalët pasuese fillojnë me shkronja të mëdha, pa asnjë vizë ndarëse. Kjo është e ndryshme nga sintaksa tradicionale e ndarë me vizë e përdorur në CSS të rregullt. Për shembull, në CSS të rregullt, do të shkruani "ngjyra e sfondit", por në stilet inline React, do të ishte "Ngjyra e sfondit".

2. Objekti JavaScript

Stilet shkruhen si objekte JavaScript me veti për të përcaktuar stilet. ju krijoni një objekt JavaScript që përmban informacionin e stilimit dhe më pas referojuni këtij objekti në atributin e stilit të elementit JSX përkatës.

const App = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };

  return (
    <div>
      <h1 style={myStyle}>Hello React!</h1>
      <p>Adding style!</p>
    </div>
  );
}
export default App;

myStyle është një objekt JavaScript me stile si veti. Çiftet emër-vlerë në objektin JavaScript përfaqësojnë emrat dhe vlerat e vetive CSS. Ju e shtoni stilin duke përdorur atributin stil me një shprehje JavaScript si vlerë. Emri i objektit kalohet si shprehje në kllapat kaçurrelë {}.

3. Fletë stili CSS

Ju shkruani stilin tuaj CSS në një skedar të veçantë duke e ruajtur atë me shtesën e skedarit .css. Pasi të keni krijuar skedarin CSS, më pas mund ta importoni atë në aplikacionin tuaj React dhe stilet e përcaktuara në skedarin CSS do të aplikohen në komponentët përkatës.

/* App.css file */
body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
}

.button {
  color: DodgerBlue;
  padding: 40px;
  text-align: center;
}
/** App.js file */
import './App.css';

export default function MyApp() {
  return (
    <div>
      <h1 className={styles.button}>Welcome to my app</h1>
    </div>
  );
}
/** index.js file */
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyApp from './App.js';

ReactDOM.render(<MyApp />, document.getElementById('root'));

Këtu, stili shkruhet në skedarin App.css në të njëjtën direktori si skedarët React App.js dhe index.js. stilet importohen në skedarin App.js. Emri i klasës për një element është deklaruar në kllapa kaçurrelë { } si një shprehje JavaScript, d.m.th., stile.buton.

Reagojnë Hooks

React prezantoi Hooks në versionin 16.8 dhe ato shërbejnë si funksione që u mundësojnë zhvilluesve të "lidhin" në gjendjen dhe veçoritë e ciklit jetësor të React nga komponentët funksionalë.

Hooks lejojnë që komponentët e funksionit të kenë akses në gjendjen dhe veçoritë e tjera të React. Me prezantimin e Hooks, komponentët e klasës nuk janë më opsioni i vetëm për menaxhimin e gjendjes dhe ciklit jetësor në aplikacionet React. React ofron disa grepa të integruara si useState, useContext, useCallback, useEffect, useRef, useMemo, dheuseReducer.

Rregullat e grepave
dy rregullat e Hooks in React janë thelbësore për të siguruar që Hooks të funksionojë në mënyrë korrekte dhe të qëndrueshme në komponentët e funksionit:

• Hoks mund të quhen vetëm në përbërësit e funksionit të reaksionit të brendshëm: Hooks duhet të përdoren vetëm brenda komponentëve të funksionit React dhe jo në funksionet e rregullta JavaScript ose komponentët e klasës.
• Hoks mund të thirren vetëm në nivelin më të lartë të një komponenti:Hoks duhet të thirren në nivelin më të lartë të një komponenti funksioni, që do të thotë se ato nuk duhet të thirren brenda sytheve, kushteve ose deklaratave të ndërlidhura. Kjo siguron që Hooks të ekzekutohen në të njëjtin rend në çdo render
• Hoks nuk mund të jenë të kushtëzuar: Hooks nuk mund të thirren me kusht, që do të thotë se ato nuk mund të vendosen brenda nëse deklaratat ose strukturat e tjera të kushtëzuara

Këtu është një shembull se si funksionon React hook duke përdorur useState. Kjo krijon një komponent që rrit një numër kur klikohet një buton.

import { useState } from 'react'

function App() {
  const [counter, setCounter] = useState(0);

  const increment = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="App">
      <button onClick={increment}>Click me</button>
      <h2>{`Button clicked ${counter} times`}</h2>
    </div>
  );
}

export default App;

Në kodin e mësipërm, ne importojmë grepin useState nga React. Duke thirrur useState(0), ne inicializojmë variablin e gjendjes së numëruesit me vlerën 0 dhe funksionin setCounter për ta përditësuar atë. Funksioni i rritjes thirret kur klikohet butoni, duke përditësuar numërimin.

useState pranon një gjendje fillestare dhe kthen dy vlera: Gjendja aktuale, Një funksion që përditëson gjendjen. Vini re se ne po destrukturojmë vlerat e kthyera nga useState. React sinkronizon ndërfaqen e përdoruesit sa herë që ndryshon gjendja.

Pasi klikoni butonin…

Variablat dhe mbështetësit

Ndryshoret

Siç e kam përmendur më herët në artikull, kllapat kaçurrelë { } përdoren për të mbajtur shprehjet JavaScript. Variablat janë shprehje. Për të ruajtur një vlerë në një variabël dhe për ta përdorur atë në komponentë, deklaroni variablin, pastaj kaloni variablin si shprehje kur është e nevojshme.

function App() {
  const text = "React";

  return (
    <div className="App">
      <h1>Hello, {text}!</h1>
      <p style={{ color: "blue", alignItems: "center" }}>{text} is fun</p>
    </div>
  );
}


/** output:
Hello, React!
React is fun */

React Props

Props janë argumente të transmetuara në komponentët e React. Në React, props (shkurt për "veti") përdoren për të kaluar të dhëna nga një komponent në tjetrin. Kur jepni një komponent, ju mund t'i kaloni vlerat atij përmes atributeve HTML, të cilat më pas janë të aksesueshme brenda komponentit si mbështetëse.

React Props sillen në mënyrë të ngjashme me argumentet e funksionit në JavaScript dhe atributet në HTML.

Për të dërguar mbështetës në një komponent, përdorni të njëjtën sintaksë si atributet HTML. Komponentët shtohen si vlera të atributeve në komponentin React. Në shembullin më poshtë, "button" është argumenti i caktuar për emrin e atributit tekst në komponentin MyButton

const myElement =  <MyButton text="button"/>

Kur një komponent merr props, ai i merr ato si një objekt i vetëm i njohur si objekti i props.

function MyButton(props) {
  return (
    <button>I'm a { props.text }!</button>
  );
}

Këtu, rekuizita është një objekt. Ky objekt përmban të gjitha çiftet çelës-vlerë të mbështetësve që i kalohen komponentit.

Për të hyrë në vlerat, mund të përdorni ose

• Shënimi me pika (props.text)
• Shënimi i kllapave katrore (produkte[“tekst”] )
• Shkatërroni objektin. (konst { tekst } = rekuizita )

function MyButton({text, text2}) {
  return (
    <button>`I'm a {text}, {text2}`</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton text="button" text2="Click me"/>
    </div>
  );
}

Listat dhe interpretimi i kushtëzuar

React mundëson paraqitjen dinamike të listave dhe paraqitjen e kushtëzuar të komponentëve bazuar në kushte specifike, duke e bërë të lehtë ndërtimin e ndërfaqeve fleksibël dhe interaktive të përdoruesit.

Listat

React ju lejon të jepni në mënyrë dinamike listat e elementeve duke përdorur funksionin map() të JavaScript së bashku me JSX.

function ItemList() {
  const items = ['Car', 'Bag', 'Shoe'];
  return (
    <>
      <h1>What do you have?"</h1>
      <ul>
        {items.map((item) => <li>{item}</li>)}
      </ul>

      <ul>
        {items.map((item, index) => (
            <li key={index}>{index}. {item}</li>
         ))}
      </ul>
    </>
  );
}

Kushtet

React ju lejon të jepni me kusht komponentët bazuar në kushte specifike duke përdorur shprehje të rregullta JavaScript brenda JSX.

function Pass() {
  return <h1>Pass!</h1>;
}

function Fail() {
  return <h1>Failed!</h1>;
}

• nëse deklarata

export default function Result() {
  const status = true;
  if (status) {
    return <Pass />;
  }
  return <Fail />;
}

• Operator tresh

"Shikoni artikullin tim mbi Operatorin Ternary"

export default function Result() {
  const status = true;
  return (
    <>
      { status ? <Pass /> : <Fail /> }
    </>
  );
}

Këtu është një shembull i listave me objekte:

function Student(props) {
  return <li>I scored { props.score }</li>;
}

function Result() {
  const Scores = [
    {id: 1, Grade: 70},
    {id: 2, Grade: 98},
    {id: 3, Grade: 45}
  ];
  return (
    <>
      <h1>What are the students score?</h1>
      <ul>
        {cores.map((score) => <Student key={score.id} brand={score.rade} />)}
      </ul>
    </>
  );
}

JSX - JavaScript + XML

JSX është një sintaksë e zgjerimit JavaScript e përdorur në React për të shkruar lehtësisht HTML dhe JavaScript së bashku. SX është një shtesë sintaksore për JavaScript që lejon zhvilluesit të shkruajnë elemente HTML në kodin JavaScript.

React kujdeset për kthimin e JSX në DOM (Modeli i Objektit të Dokumentit). JSX do të lëshojë një gabim nëse HTML nuk është i saktë, ose nëse HTML humbet një element prind. className përdoret në vend të klasës për shtimin e klasave CSS, pasi class është një fjalë kyçe e rezervuar në JavaScript. Vetitë dhe metodat në JSX janë shkruar në camelCase.

const Text = <h1 className="myclass">I Love JSX!</h1>;

const myElement = (
  <div>
    <Text />
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Burimet

"Kursi i përplasjes së reagimit"