React.js este o bibliotecă JavaScript utilizată pentru crearea interfețelor utilizator web dinamice și interactive. A fost dezvoltată de Facebook și este folosită pentru construirea de aplicații web moderne. React.js este construită în jurul unui concept numit “componente”, care reprezintă bucăți de cod reutilizabile și independent gestionate, ceea ce face ca dezvoltarea aplicațiilor web să fie mai ușoară și mai eficientă.

Există mai multe motive pentru a folosi React.js în dezvoltarea aplicațiilor web. Iată câteva dintre cele mai importante:

• Reutilizarea codului: React.js încurajează dezvoltatorii să creeze componente reutilizabile, ceea ce poate reduce semnificativ timpul de dezvoltare și poate duce la cod mai curat și mai ușor de întreținut.
• Performanța: React.js are o performanță excelentă datorită faptului că utilizează Virtual DOM, o tehnică care optimizează modul în care sunt actualizate paginile web, fără a necesita o reîncărcare completă a paginii.
• Comunitatea mare: React.js are o comunitate mare și activă de dezvoltatori, care împărtășesc cunoștințe și dezvoltă instrumente și biblioteci suplimentare care pot fi utilizate împreună cu React.js.

React.js diferă față de alte framework-uri prin abordarea sa modulară și component-based. În timp ce alte framework-uri web se concentrează pe construirea de pagini web întregi, React.js se concentrează pe construirea de componente reutilizabile. Această abordare modulară face ca dezvoltarea să fie mai ușoară și mai eficientă, deoarece dezvoltatorii pot construi și testa componente independent, apoi le pot folosi în diferite aplicații web fără a fi nevoie să le rescrie. De asemenea, React.js utilizează Virtual DOM pentru a gestiona actualizările paginii, ceea ce face ca aplicațiile să fie mai rapide și mai eficiente decât cele construite folosind alte framework-uri.

1. Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: https://nodejs.org/en/download/
2. Instalarea unui editor: VS Code https://code.visualstudio.com/download sau WebStorm https://www.jetbrains.com/webstorm/download (Recomandăm VS Code)
3. Rularea comenzii:

   npx create-react-app my-app
   npx create-react-app my-app --template typescript // pentru initializarea cu TypeScript

4. Accesarea directorului noului proiect creat cu comanda:

   cd my-app

5. Pornirea aplicației cu comanda:

   npm start

6. Accesarea aplicației la http://localhost:3000/

În React.js, componentele sunt blocuri de construcție fundamentale ale interfeței utilizatorului. Acestea sunt reutilizabile și pot fi combinate pentru a crea interfețe complexe. Există două tipuri de componente în React.js:

• Componente funcționale: Acestea sunt componente care sunt scrise sub formă de funcții și returnează JSX (JavaScript XML) care descrie cum ar trebui să arate componenta.

Exemplu de componentă funcțională:

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

• - Componente bazate pe clasă: Acestea sunt componente care sunt scrise sub formă de clase și extind clasa React.Component. Aceste componente au acces la proprietățile (props) și starea (state) componentei, precum și la diferite metode ale ciclului de viață(lifecycle) al React.

Exemplu de componentă bazată pe clasă: :

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Proprietățile (props) sunt argumente pe care le puteți transmite în componente. Acestea sunt folosite pentru a personaliza comportamentul unei componente și pot fi accesate prin intermediul obiectului props.

Exemplu de utilizare a proprietăților într-o componentă funcțională:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
const element = <Welcome name="John" />;
ReactDOM.render(element, document.getElementById('root'));

Starea (state) este o altă caracteristică importantă a componentelor React. Starea este utilizată pentru a gestiona datele componentelor care se pot schimba în timp. Starea este definită în constructorul componentei și poate fi actualizată prin apelarea metodei setState.

Exemplu de utilizare a stării într-o componentă bazată pe clasă:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

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

Comunicarea între componente este importantă pentru a construi aplicații complexe. În React.js, comunicarea între componente poate fi realizată prin transmiterea de proprietăți de la o componentă părinte la o componentă copil sau prin utilizarea unei funcții callback pentru transmiterea datelor dinspre copil spre părinte.

Componentele pot transmite date către componente copil prin intermediul proprietăților, iar acestea pot fi modificate în funcție de nevoile componente copil. Astfel, orice modificare a proprietăților din componenta părinte va fi reflectată automat în componenta copil.

Iată un exemplu de utilizare a acestui mod de comunicare:

import React from 'react';

function Parinte() {
  const data = { nume: 'Ion', prenume: 'Popescu' };

  return (
    <div>
      <h1>Bun venit, {data.nume} {data.prenume}!</h1>
      <Copil data={data} />
    </div>
  );
}

function Copil(props) {
  const { nume, prenume } = props.data;

  return (
    <div>
      <p>Nume: {nume}</p>
      <p>Prenume: {prenume}</p>
    </div>
  );
}

Pentru a comunica dintr-o componentă copil către o componentă părinte în React.js, se poate folosi o funcție callback. Această metodă constă în definirea unei funcții în componenta părinte, pe care o transmitem apoi către componenta copil ca proprietate. Componenta copil poate apela funcția atunci când are nevoie să transmită informații înapoi către componenta părinte.

Iată un exemplu de utilizare a acestei metode:

import React, { useState } from 'react';

function Parinte() {
  const [mesaj, setMesaj] = useState('');

  // Definim o funcție care primește un mesaj
  // și îl setează ca stare în componenta părinte
  const handleMesajSchimbat = (noulMesaj) => {
    setMesaj(noulMesaj);
  }

  return (
    <div>
      <p>Mesajul primit: {mesaj}</p>
      <Copil onMesajSchimbat={handleMesajSchimbat} />
    </div>
  );
}

function Copil(props) {
  const [mesaj, setMesaj] = useState('');

  // Funcție care apelează funcția de la părinte pentru a trimite mesajul
  // din copil înapoi către părinte
  const handleClick = () => {
    props.onMesajSchimbat(mesaj);
  }

  return (
    <div>
      <input type="text" value={mesaj} onChange={(event) => setMesaj(event.target.value)} />
      <button onClick={handleClick}>Trimite mesaj</button>
    </div>
  );
}

Routing-ul este procesul de gestionare a navigării între diferite pagini sau secțiuni ale unei aplicații web. În React.js, routing-ul este gestionat prin intermediul unei biblioteci numite React Router. React Router oferă un mecanism simplu de definire a rutelor în aplicație și de afișare a componentelor corespunzătoare acestor rute.

În React.js, rutarea este definită ca o asociere între un URL și o componentă.

Pentru a gestiona rutele în React.js, trebuie mai întâi instalată biblioteca React Router folosind un manager de pachete, cum ar fi npm sau Yarn:

npm install react-router-dom

După ce a fost instalat React Router, se pot defini rutele în aplicație.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import PaginaPrincipala from './PaginaPrincipala';
import PaginaDespre from './PaginaDespre';
import PaginaContact from './PaginaContact';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Pagina principală</Link>
            </li>
            <li>
              <Link to="/despre">Despre noi</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={PaginaPrincipala} />
        <Route path="/despre" component={PaginaDespre} />
        <Route path="/contact" component={PaginaContact} />
      </div>
    </Router>
  );
}

O altă caracteristică puternică a React Router este capacitatea de a utiliza parametri în rute. Aceasta poate fi utilă, de exemplu, pentru a afișa detaliile unui anumit element dintr-o listă.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import ListaProduse from './ListaProduse';
import DetaliiProdus from './DetaliiProdus';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Pagina principală</Link>
            </li>
            <li>
              <Link to="/produse">Produse</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={PaginaPrincipala} />
        <Route exact path="/produse" component={ListaProduse} />
        <Route path="/produse/:id" component={DetaliiProdus} />
      </div>
    </Router>
  );
}

Instalați-vă uneltele necesare pentru laborator și cereți ajutorul daca întâmpinați dificultăți.

Creați un nou proiect și porniți-l. Daca aveți întrebări, întrebați asistentul/a, mai multe informații o să fie furnizate la următoarele laboaratoare.

• GitLab Schelet Frontend: https://gitlab.com/mobylabwebprogramming/reactfrontend
• Node.js: https://nodejs.org/en/download/
• VS Code https://code.visualstudio.com/download
• WebStorm https://www.jetbrains.com/webstorm/download/
• Tutorial React.js: https://reactjs.org/tutorial/tutorial.html