React

React dichiarazione di un componente

by

Le dichiarazioni di un componente in React possono essere fatte in diverse forme, ma le principali sono le seguenti:

  1. Dichiarazione di funzione (Function Component):React
function MyComponent(props) {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
}

// Oppure usando la sintassi delle frecce (Arrow Function Component):
const MyComponent = (props) => {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
};

// Quando vuoi esportare il componente:
export function MyComponent(props) {
  // ...
}

// Oppure con la sintassi delle frecce:
export const MyComponent = (props) => {
  // ...
};
  1. Class Component:
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // Il tuo codice JSX e logica qui...
    return <div>Contenuto del componente</div>;
  }
}

export default MyComponent;
  1. Componente con la sintassi di classe e hooks:
import React, { useState, useEffect } from 'react';

const MyComponent = (props) => {
  // Utilizzo degli hooks per lo stato e gli effetti
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Effetto eseguito dopo il render
    document.title = `Hai cliccato ${count} volte`;
  }, [count]);

  // Il tuo codice JSX e logica qui...
  return (
    <div>
      <p>Hai cliccato {count} volte</p>
      <button onClick={() => setCount(count + 1)}>Cliccami</button>
    </div>
  );
};

export default MyComponent;

In tutte queste forme, il componente renderizza l’output usando il codice JSX. Puoi utilizzare il tipo di dichiarazione che preferisci, ma i componenti con la sintassi delle funzioni sono più comuni grazie alla loro sintassi concisa e alla facilità di lettura. Con l’introduzione degli hooks, le classi stanno diventando sempre meno utilizzate per definire i componenti.

React-Redux in pillole! (1)

by
React Redux
  1. Store: Il punto centrale di Redux è lo store, che rappresenta lo stato globale dell’applicazione. Contiene tutti i dati dell’applicazione e offre metodi per accedere, aggiornare e gestire tali dati.
  2. Actions: Le azioni sono oggetti che descrivono un cambiamento nello stato dell’applicazione. Sono l’unico modo per modificare lo stato nello store. Un’azione ha un tipo che indica il tipo di cambiamento e può includere anche dati aggiuntivi necessari per effettuare il cambiamento.
  3. Reducers: I reducer sono delle funzioni pure che specificano come lo stato dell’applicazione viene modificato in risposta a un’azione. Ogni reducer gestisce un aspetto specifico dello stato e restituisce un nuovo stato basato sull’azione ricevuta. I reducer combinati vengono utilizzati per creare il riduttore radice che gestisce l’intero stato dell’applicazione.
  4. Dispatch: Dispatch è un metodo dello store che viene utilizzato per inviare un’azione al riduttore. Quando viene chiamato, lo store inoltra l’azione a tutti i riduttori registrati. I riduttori determinano se e come lo stato deve essere modificato in base all’azione.
  5. Subscribe: È possibile registrare funzioni di callback per essere avvisati ogni volta che lo stato dello store viene modificato. Questo può essere utile per aggiornare l’interfaccia utente in risposta a un cambiamento di stato.
  6. Connect: Il componente React può essere connesso allo store utilizzando il metodo connect di react-redux. Ciò consente al componente di accedere allo stato e alle azioni definite nello store e di essere automaticamente aggiornato quando lo stato cambia.

In sintesi, Redux offre un flusso unidirezionale dei dati, dove le azioni vengono inviate agli store, i riduttori elaborano le azioni per modificare lo stato e i componenti vengono aggiornati automaticamente quando lo stato cambia.