I concetti fondamentali di React e il linguaggio JSX

In questo tutorial introdurremo buona parte dei concetti e dei fondamentali dello sviluppo in React

Creare e innestare components

Una React App è composta da componenti. Un componente è un "pezzo di UI" (user interface) dotato di una logica e di un aspetto visivo. Esso può essere di qualsiasi dimensione: da un semplice bottone ad un'intera pagina.

Un React component è una funzione javascript che ritorna dal markup

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

E' possibile inserire dei componenti all'interno di altri componenti.

function ComplexComponent() {
  return (
    <div>
      <h1>Ciao, sono un componente</h1>
      <Button />
    </div>
  );
}

Notate che il tutti i nostri component hanno la prima lettera maiuscola. Questo non è un dettaglio: i componenti React devono avere la lettere maiuscola.

Come scrivere Markup e JSX

La scrittura che abbiamo visto finora prende il nome di JSX. Per quanto somigli a dell'HTML il JSX ha delle regole più stringenti:

• Tutti i tag JSX devono rigorosamente essere chiusi. (In HTML tag come img w br non hanno bisogno di essere chiusi)
• Non è possibile ritornare più JSX tags in un unico component.

//Non valido
function AboutPage() {
  return (
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>

  );
}

//Valido
function AboutPage() {
  return (
    <div>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </div>
  );
}

Se volessi provare a convertire il tuo HTML in JSX qui puoi trovare un [convertitore online][1]

Come aggiungere il css

In React possiamo per aggiungere ad un tag JSX semplicemente usando l'attributo className ai nostri tag ed esso si comporterà esattamente come l'attributo class in HTML.

<img className="avatar" />

Dopodiché ci basterà definire nel nostro file css del normalissimo CSS

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React non indica un modo predefinito per utilizzare del css. Nel caso più semplice sarà sufficiente inserire in link tag all'interno del tuo file index.html

Come mostrare dati dinamici

Il JSX ci permette di inserire del Javascript all'interno del nostro markup. Si può ottenere questo aprendo delle parentesi graffe che ci permetteranno di "tornare in javascript" e mostrare ai nostri utenti informazioni contenute all'interno delle nostre variabili.

return (
  <h1>
    {user.name}
  </h1>
);

E' possibile "tornare in Javascript" anche quando si lavora con gli attributi HTML. Si dovrà semplicemente aprire le parentesi graffe invece di aprire le virgolette. Vedi la differenza tra className e src:

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

All'interno del nostro JSX possiamo inserire espressioni più complesse come ad esempio la [concatenazione di stringhe][2]

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Attenzione La scrittura style={{}} non è una scrittura speciale ma il normale modo in cui si passa una oggetto ad un attributo HTML. Perché con le prime parentesi stiamo "tornando in Javascript" e le seconde definiscono il nostro oggetto che passiamo a style.

Conditional Rendering

In React possiamo usare i normali metodi che usiamo in javascript per scrivere delle condizioni. Possiamo usare un if else per renderizzare dinamicamente il JSX:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

Se volessimo ottenere una scrittura più compatta possiamo usare un operatore ternario ? che al contrario dell'if statement funziona direttamente all'interno del JSX.

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

Se non avessimo bisogno di un else condition possiamo usare l'operatore logico &&

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Rispondere agli eventi

Per rispondere agli eventi è sufficiente dichiarare un event handler function all'interno del nostro componente

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Nota che onClick={handleClick} non richiama la funzione handleClick con le parentesi alla fine. Questo perché così come in Javascript gli event listener accettano in React accettano delle callback.