Silviu Bogan

Dezvoltator de site-uri

Ce este React?

Biblioteca pentru interfețe de utilizator în navigator și native

Creeați interfețe de utilizator din componente

React vă permite să construiți interfețe de utilizator din piese individuale numite componente. Creeați-vă propriile componente ca Miniatură, ButonÎmiPlace și Video. Apoi combinați-le în ecrane, pagini și aplicații întregi.

Video.js

function Video({ video }) {
  return (
    <div>
      <Miniatură video={video} />
      <a href={video.url}>
        <h3>{video.titlu}</h3>
        <p>{video.descriere}</p>
      </a>
      <ButonÎmiPlace video={video} />
    </div>
  );
}

Fie că lucrați singur ori cu mii de alți dezvoltatori, a folosi React se simte la fel. Este proiectat să vă lase să combinați fără să vreți componente scrise de oameni, echipe și organizații independente.

Scrieți componente cu cod și limbaj de marcare

Componentele React sunt funcții JavaScript. Vreți să afișați condițional niște conținut? Folosiți o instrucțiune if. Afișați o listă? Folosiți funcția map() a tabloului. Învățați React învățând programare.

ListăVideo.js

function ListăVideo({ videouri, antetGol }) {
  const număr = videouri.length;
  let antet = antetGol;
  if (număr > 0) {
    const substantiv = număr > 1 ? 'Videouri' : 'Video';
    antet = număr + ' ' + substantiv;
  }
  return (
    <section>
      <h2>{antet}</h2>
      {videouri.map(video =>
        <Video key={video.id} video={video} />
      )}
    </section>
  );
}

Această sintaxă de marcare se cheamă JSX. Ea este o extensie a sintaxei JavaScript popularizată de React. Punând marcajul JSX aproape de conexa logică de randare face componentele React ușor de creat, menținut și șters.

Adăugați interactivitate oriunde aveți nevoie

Componentele React primesc date și întorc ce ar trebui să apară pe ecran. Puteți să le pasați noi date, cum ar fi când utilizatorul tastează într-un câmp. React apoi va actualiza ecranul să reflecte datele noi.

ListăVideoCăutabilă.js

import { useState } from 'react';

function ListăVideoCăutabilă({ videouri }) {
  const [termen, setTermen] = useState('');
  const videouriGăsite = filtreazăVideouri(videouri, termen);
  return (
    <>
      <CâmpCăutare
        valoare={termen}
        laSchimbare={(termenNou) => setTermen(termenNou)} />
      <ListăVideo
        videouri={videouriGăsite}
        antetGol={`Niciun rezultat pentru "${termen}"`} />
    </>
  );
}

Nu trebuie să construiți întreaga dumneavoastră pagină în React. Adăugați React la pagina dumneavoastră existentă HTML, și randați componente React interactive oriunde în ea.

Adaugă React în pagina ta (TODO)

Alegeți stiva-plină cu o platformă de lucru

React este o bibliotecă. Vă permite să puneți componente laolaltă, dar ea nu prescrie cum să se facă rutarea și preluarea datelor. Ca să construiți o aplicație întreagă cu React, recomandăm o platformă de lucru React stivă-plină cum ar fi Next.js ori React Router.

conferințe/[prescurtare].js

import { bd } from './baza-de-date.js';
import { Suspense } from 'react';

async function PaginăConferință({ prescurtare }) {
  const conf = await bd.Conferințe.find({ prescurtare });
  return (
    <AspectConferință conf={conf}>
      <Suspense fallback={<ÎncărcareDiscursuri />}
        <Discursuri idConf={conf.id} />
      </Suspense>
    </AspectConferință>
  );
}

async function Discursuri({ idConf }) {
  const discursuri = await bd.Discursuri.findAll({ idConf });
  const videouri = discursuri.map(discurs => discurs.video);
  return <ListăVideoCăutabilă videouri={videouri} />;
}

React este și o arhitectură. Platformele de lucru care o implementează vă permit să preluați date în componente asincrone care se execută pe server ori chiar în timpul construcției. Citiți date dintr-un fișier ori o bază de date, și pasați-le în jos componentelor dumneavoastră interactive.

Începeți cu o platformă de lucru (TODO)

Folosiți ce e cel mai bun din fiecare platformă

Oamenii iubesc aplicațiile rulate în navigator și pe cele native din motive diferite. React vă permite să construiți din ambele categorii folosind aceleași abilități. Ea se sprijină pe punctele forte ale fiecărei platforme să permită interfețelor dumneavoastră să se simtă potrivit pe fiecare platformă.

Rămâi fidel navigatorului

Va urma.