react developer umbria

Abbiamo fatto 30, facciamo 31: consolidare il nostro overview su REACT con Papa Pio X

ABBIAMO FATTO 30 FACCIAMO 31: l’origine di questo detto è antichissima: nel 1517 Papa Pio X creò una lista nuova di cardinali inserendone dodici. Poco dopo il numero salì a venti, poi ventotto. Il giorno prima di mostrare la lista, il Papa aggiunge altri due nomi, fino ad arrivare ad un numero di trenta, nonostante l’opposizione dei vecchi cardinali. Il giorno dopo, però, se ne aggiunse addirittura anche un altro (si narra che quel 31esimo fosse un amico importante del Papa), e allora Pio X esclamò: “Tanto è 30 che 31”. Da quel momento in poi il detto subì diverse modifiche fino a raggiungere la forma attuale dell’ “abbiamo fatto 30 facciamo 31”.

rete

Sul sito https://umbriawaysemplifica.wordpress.com/ abbiamo fatto trenta e allora anche senza essere il Papa tiriamo fuori la nostra frase inesplicabile, “tanto è 30 che 31! Significa andare in luoghi inediti tipo https://it.reactjs.org/ o https://reactnative.dev/ o https://babeljs.io/ e vedere che cosa si racconta in proposito. Al lavoro!

React é dichiarativo. React rende la creazione di UI interattive facile e indolore. Progetta interfacce per ogni stato della tua applicazione. Ad ogni cambio di stato React aggiornerà efficientemente solamente le parti della UI che dipendono da tali dati. La natura dichiarativa dell’UI rende il tuo codice più prevedibile e facile da debuggare. Componenti. Crea componenti in isolamento e componili per creare UI complesse. Dato che interazioni e logica per i componenti sono implementate in JavaScript puoi facilmente passare ed accedere strutture dati complesse in vari punti della tua applicazione senza dover salvare informazioni sul DOM. Imparalo una volta, usalo ovunque. Non facciamo supposizioni sulle tecnologie che utilizzi correntemente. In questo modo puoi sviluppare nuove funzionalità in React senza riscrivere codice esistente. React può inoltre effettuare rendering lato server con Node e in applicazioni mobile grazie a React Native. Un Componente Semplice. I componenti React implementano un metodo render() che riceve dati in input e ritorna cosa deve visualizzare. Questo esempio usa una sintassi simile ad XML chiamata JSX. I dati passati in input al componente possono essere acceduti da render() via this.props. JSX è opzionale e non richiesto per utilizzare React. Prova il tool Babel REPL per vedere il codice JavaScript grezzo generato nel processo di compilazione JSX:

props
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Ciao {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Claudia" />,
  document.getElementById('hello-example')
);

Un Componente Stateful. Oltre a ricevere dati in input (accessibili via this.props), un componente può mantenere i dati del suo stato interno (accessibili via this.state). Quando lo stato di un componente cambia, il codice markup generato viene aggiornato invocando di nuovo render(), ciò avviene automaticamente:

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

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Secondi: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);

Una Applicazione. Usando props e state, possiamo costruire una piccola applicazione Todo (lista delle cose da fare). Questo esempio usa state per tracciare la lista corrente degli elementi oltre a cosa ha inserito l’utente. Anche se gli event handlers sembrano renderizzati inline, essi vengono raccolti ed implementati mediante delegati:

una applicazione completa
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            Cosa bisogna fare?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Aggiungi #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

Un Componente con Plugin Esterni. React ti permette di interfacciarti con altre librerie e frameworks. Questo esempio usa remarkable, una libreria esterna Markdown, per convertire il contenuto di una in tempo reale. </p>

plugin esterni
class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Ciao, **mondo**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Inserisci codice markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <MarkdownEditor />,
  document.getElementById('markdown-example')
);

A questo punto se volessimo spingerci oltre dovremmo dare un occhiata a https://it.reactjs.org/tutorial/tutorial.html o anche per un maggior afflusso di teoria https://it.reactjs.org/docs/hello-world.html , ma sarebbe come far dire a Papa Pio X facciamo 32 che per il post sembra troppo!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...