Un SPA sau o aplicatie cu o singura pagina, este o aplicatie (sau un website) care interactioneaza cu browserul web prin rescrierea dinamica, a DOM-ului current, cu date noi generate fie din client, fie din server. In acest caz, browserul nu este nevoit sa incarce o pagina noua.

Considerati urmatoarea linie

Aceasta sintaxa se numeste JSX, iar denumirea a pornit de la Syntax Extension to JavaScript. Aceasta sintaxa este folosita in React pentru a descrie cum va arata o componenta. JSX se poate sa va duca cu gandul la HTML, diferenta este ca JSX vine si cu toate functionalitatile JavaScript. In exemplul de mai jos, declaram o variabila name, iar ulterior o folosim in interiorul JSX fiind pusa intre paranteze acolade.

De asemenea, puteti sa puneti orice cod JavaScript valid in interiorul parantezelor acolade in JSX.

JSX poate sa fie folosit si in contextul unor expresii, precum

Tag-urile JSX pot contine si mai multi copii.

De asemenea, putem folosi JSX pentru a ne proteja si de eventuale atacuri.

JSX reprezinta obiecte. Babel se ocupa de compilarea JSX in apeluri React.createElement()

React este o biblioteca JavaScript pentru construirea de interfete utilizator. Este creat si intretinut de Facebook si de o comunitate de dezvoltatori ( open source ) si desigur si de alte companii individuale.

Pentru a putea folosi tool-ul oferit de Facebook, avem nevoie sa indeplinim urmatoarele conditii: Node >= 8.10 si npm >= 5.6.

Pentru a genera un proiect trebuie sa rulati urmatoarele:

Dupa rularea script-ului npm start puteti accesa aplicatia accesand link-ul din consola

http://localhost:3000

Componentele va permit sa va impartiti interfata utilizator in “piese” reutilizabile, iar in acelasi timp va puteti gandi la fiecare piesa ca fiind izolata.

Conceptual, componentele sunt asemanatoare cu functiile JavaScript. Acestea accepta intrari (denumite “props”) si returneaza elemente React, care descriu ceea ce ar trebui sa apara in interfata.

Cea mai simpla cale de a defini o componenta este aceea de a scrie o functie JavaScript

Aceasta functie este o componenta valida React deoarece accepta un singur obiect “props” (proprietati) cu date si returneaza un element React. Aceste componente poarta denumirea de function components deoarece ele reprezinta niste functii JavaScript.

De asemenea, puteti folosi si o clasa ES6 pentru a defini o componenta:

Cele doua componente definite mai sus, sunt echivalente din punct de vedere React.

Pana acum, am intampinat elemente React care reprezentau tag-uri DOM, precum:

De asemenea, elementele pot reprezenta si componente definite de utilizator:

Cand React descopera un element care reprezinta o componenta definita de utilizator, acesta trimite atributele JSX si copiii catre aceasta componenta folosind un singur obiect. Acest obiect poarta numele de “props”.

In exemplul urmator, codul “randeaza”, in pagina, mesajul Hello, Sara.

Componentele create pot fi reutilizate de cate ori dorim. Spre exemplu, putem crea o componenta App care afiseaza Welcome de mai multe ori, folosind alt nume.

State reprezinta un obiect JavaScript care pastreaza informatia influentand aspectul sau starea componentei compilate si randate. Diferenta fata de props este aceea ca starea este mentinuta in contextul componentei - similar cu definirea unei variabile in interioriul unei functii.

In cazul componentelor functionale, o variabila de stare este declarata cu ajutorul useState (React Hooks). O variabila de stare poate lua mai multe forme: string, numar sau obiect. Functia useState primeste ca paramentru valoarea initiala pe care vrem sa o atribuim variabilei si returneaza variabila de stare impreuna cu functia de actualizare, similara cu this.setState din componentele de tip clasa.

Cele doua componente prezentate mai sus sunt echivalente, insa exista o mica diferenta:

Class Components fac referire la state sau props folosind this.

Class components

this.state
this.props

Functional Components

state
props

Gestionarea evenimentelor cu elemente React este foarte asemanatoare cu gestionarea evenimentelor pe elemente DOM. Totusi, exista cateva diferente de sintaxa:

• evenimentele din React sunt camelCase
• pentru gestionarea evenimentelor in React sunt folosite functii, nu string-uri

HTML

React

HTML

React

Randarea bazata pe conditii, in React, functioneaza in acelasi mod precum conditionarea in JavaScript. Folositi operatori JavaScript precum if sau conditional operator pentru a crea elemente reprezentand starea curenta.

Considerati urmatoarele doua componente:

Vom implementa o componenta Greeting care afiseaza una dintre aceste componente, daca un utilizator este autentificat sau nu.

In primul rand, sa ne amintim cum transformam listele in JavaScript.

Acest cod afiseaza urmatorul rezultat in consola

[2, 4, 6, 8, 10]

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

Cand rulam acest cod, in consola va fi afisat un mesaj de atentionare spunandu-ne ca pentru fiecare li (list item) trebuie sa furnizam o cheie unica.

Pentru a rezolva aceasta problema, trebuie sa introducem urmatoarea modificare:

Aceste keys (chei) ajuta React-ul la identificarea elementelor care s-au schimbat, adaugat si eliminat. Putem privi aceste chei precum identitatea unui element.

React are un model puternic de compozitie si va recomandam sa folositi compozitia in loc de mostenire pentru a reutiliza codul intre componente

Unele componente nu stiu din timp ce copii vor avea. Aceste componente sunt de obicei folosite cand ne definini Layout-ul aplicatiei sau orice element care reprezinta o 'cutie' pentru elementele noastre.

Fiecare componenta React, are o proprietare rezervata in obiectul props numita children. Aceasta proprietate poate fi accesata in felul urmator:

Class components

this.props.children

Functional components

props.children

Stilizarea unei pagini web poate sa devina obositoare scriind aceleasi linii de cod (culori, layout, font, pozitie), mai ales cand vrem sa schimbam tema.Sass, pre-procesor CSS, vine in ajutorul nostru, oferindu-ne posibilitatea folosirii de variabile, mixins sau nesting.

Exemplu folosire variabile

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Exemplu folosire nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Exemplu folosire mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { 
  @include transform(rotate(30deg)); 
}

Pentru o organizare buna a codului, putem folosi module in care sa tinem culorile, fonturile, dimensiunile folosite in website.

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Poate una dintre cele mai utile feature-uri din Sass, cu @extend putem sa distribuim proprietati CSS de la un selector la altul.

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Realizati urmatoarele exercitii astfel incat sa respecte design-ul de mai sus. Informatiile legate de font si culori le puteti gasi sub design. Pentru font, puteti folosi Google Fonts, iar pentru partea de layout folositi Flexbox.

1. Generati o aplicatie React folosind create-react-app.
2. Creati o componenta Counter care sa afiseze un numar si 3 butoane Increment, Decrement si Reset.
3. Adaugati functionalitatea necesara pentru a incrementa, decrementa si reseta starea componentei Counter.
4. Creati 3 componente (Class sau Functional) Header, Footer si Layout.
5. Creati o sectiune in componenta Layout care sa reprezinte continutul afisat pe pagina, iar in interiorul acestui continut sa putem adauga copii folosind compozitia.
6. Adaugati Header si Footer in Layout pentru a defini structura paginii.
7. Afisati componenta Counter in Layoutul pe care l-ati creat anterior.