Descrivere la UI

Il tuo Primo Componente

Le applicazioni React sono costruite da pezzi isolati di UI chiamati componenti. Un componente React è una funzione JavaScript che puoi arricchire con marcatura. I componenti possono essere piccoli come un pulsante o grandi come un’intera pagina. Ecco un componente Gallery che renderizza tre componenti Profile:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Leggi Il Tuo Primo Componente per imparare a dichiarare e utilizzare i componenti React.

Read More

---

Importazione ed Esportazione di Componenti

Puoi dichiarare molti componenti in un unico file, ma i file grandi possono diventare difficili da gestire. Per risolvere questo problema, puoi esportare un componente in un file separato e poi importare quel componente da un altro file:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Leggi Importazione ed Esportazione di Componenti per imparare come suddividere i componenti in file separati.

Read More

---

Scrivere Markup con JSX

Ogni componente React è una funzione JavaScript che può contenere del markup che React renderizza nel browser. I componenti React utilizzano una estensione di sintassi chiamata JSX per rappresentare questo markup. JSX assomiglia molto all’HTML, ma è un po’ più rigoroso e può mostrare informazioni dinamiche.

Se copiamo del markup HTML esistente in un componente React, non funzionerà sempre:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>

Se hai HTML esistente come questo, puoi risolverlo usando un convertitore:

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve spectrum technology</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

Leggi Scrivere Markup con JSX per imparare come scrivere JSX valido.

Read More

---

JavaScript in JSX con Parentesi Graffe

JSX ti consente di scrivere markup simile all’HTML all’interno di un file JavaScript, mantenendo la logica di rendering e il contenuto nello stesso luogo. A volte vorrai aggiungere un po’ di logica JavaScript o fare riferimento a una proprietà dinamica all’interno di quel markup. In questa situazione, puoi usare le parentesi graffe nel tuo JSX per “aprire una finestra” su JavaScript:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

Leggi JavaScript in JSX con Parentesi Graffe per imparare come accedere ai dati JavaScript da JSX.

Read More

---

Passare Prop a un Componente

I componenti React usano prop per comunicare tra loro. Ogni componente padre può passare informazioni ai suoi componenti figlio dandogli delle props. Le props potrebbero farti pensare agli attributi HTML, ma puoi passare qualsiasi valore JavaScript attraverso di esse, inclusi oggetti, array, funzioni e persino JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Ready to learn this topic?

Leggi Passaggio di Props a un Componente per imparare come passare e leggere props.

Read More

---

Rendering Condizionale

I tuoi componenti spesso dovranno mostrare cose diverse a seconda di diverse condizioni. In React, puoi renderizzare JSX in modo condizionale utilizzando la sintassi JavaScript come gli operatori if, && e ? :.

In questo esempio, l’operatore && di JavaScript viene utilizzato per renderizzare in modo condizionale un segno di spunta:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

Leggi Rendering Condizionale per imparare i diversi modi per renderizzare contenuti condizionalmente.

Read More

---

Rendering di Liste

Spesso si desidera visualizzare più componenti simili da una raccolta di dati. È possibile utilizzare i metodi filter() e map() di JavaScript con React per filtrare e trasformare l’array di dati in un array di componenti.

Per ogni elemento dell’array, è necessario specificare una key. Di solito, si vuole utilizzare un ID dal database come key. Le chiavi consentono a React di tenere traccia del posizionamento di ciascun elemento nella lista anche se la lista cambia.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

Leggi Renderizzare Liste per imparare come renderizzare una lista di componenti e come scegliere una chiave.

Read More

---

Mantenere i Componenti Puri

Alcune funzioni JavaScript sono pure. Una funzione pura:

• Si cura solo dei suoi affari. Non modifica oggetti o variabili che sono esistiti prima che fosse chiamata.
• Gli stessi input, lo stesso output. Dati gli stessi input, una funzione pura dovrebbe sempre restituire lo stesso risultato.

Scrivendo strettamente i tuoi componenti solo come funzioni pure, puoi evitare un’intera classe di errori strani e comportamenti imprevedibili man mano che la tua base di codice cresce. Ecco un esempio di componente non puro:

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Puoi rendere questo componente puro passando una prop invece di modificare una variabile esistente:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

Leggi Mantenere i Componenti Puri per imparare a scrivere componenti come funzioni pure e prevedibili.

Read More

---

La tua UI é un albero

React usa gli alberi per modellare le relazioni tra componenti e moduli.

Un albero di renderizzazione di React è una rappresentazione delle relazioni padre e figlio tra i componenti.

I componenti vicino alla parte alta dell’albero, vicini al nodo radice, sono considerati componenti di alto livello. I componenti senza componenti figli sono componenti foglia. Questa categorizzazione dei componenti è utile per capire il flusso dati e le prestazioni di rendering.

Modellare le rezazioni tra moduli JavaScript è un altro modo utile per capire la tua app. Ci riferiamo ad essa come un albero di dipendenze tra moduli.

Un albero di dipendenze è spesso usato da tools di compilazione per raggruppare tutto il codice JavaScript necessario al client da scaricare e renderizzare sotto forma di ‘bundle’. Un ‘bundle’ di dimensioni elevate peggiora l’esperienza utente delle apps React. Capire l’albero di dipensenze tra moduli è utile per diagnosticare queste problematiche.

Ready to learn this topic?

Leggi La tua UI è un albero per imparare a creare albero di renderizzazione e di dipendenza tra moduli nelle applicazioni React e come sono utili modelli mentali per migliorare l’esperienza utente e le prestazioni.

Read More

---

Qual è il Prossimo Passo?

Vai a Il Tuo Primo Componente per iniziare a leggere questa pagina del capitolo pagina per pagina!

Oppure, se sei già familiare con questi argomenti, perché non leggere su Aggiungere Interattività?