JSX e React: tips and tricks

Javascript Syntax eXtension è un'estensione del linguaggio Javascript che permette di scrivere facilmente codice HTML insieme a codice Javascript. Principalmente è utilizzato nei componenti React, ed infatti è stato creato da Meta proprio per React, ma è possibile usalo anche in altre circostanze, ad esempio con componenti Vue.js. C'è da dire che JSX React renderizza un codice diverso da quello Vue, ad esempio "className" di React diventa semplicemente "class" in Vue.

Dopo questa doverosa introduzione passiamo agli esempi che possono tornarci utili.

É possibile passare una qualsiasi espressione JavaScript come prop semplicemente circondandola da {}. Nel componente Component, il valore di props.foo sarà 10 che è esattamente il valore restituito dall’espressione 1 + 2 + 3 + 4.

< Component foo={1 + 2 + 3 + 4} / >

É anche possibile passare stringhe come props. Queste due espressioni JSX sono equivalenti:

< Component message="hello world" / >
< Component message={'hello world'} / >

E' possibile usare l'operatore Spread per le props; App1 e App2 sono equivalenti:

function App1() {
  return < Greeting firstName="John" lastName="Doe" / >;
}

function App2() {
  const props = {firstName: 'John', lastName: 'Doe'};
  return < Greeting {...props} / >;
}

E possibile passare un Array come risultato:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    < li key="A" >First item< /li >,
    < li key="B" >Second item< /li >,
    < li key="C" >Third item< /li >,
  ];
}

E' inoltre possibile renderizzare più elementi dinamici con Map:

function Item(props) {
  return < li > {props.message} < /li >;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    < ul >
      {todos.map((message) => < Item key={message} message={message} / > )}
    < /ul >
  );
}

E' possibile subordinare il rendering di un componente ad una variabile in questo modo:

< div >
  {showHeader && < Header / >}
  < Content / >
< /div >

className può contenere una stringa di nomi di classi separati da spazi, per cui si può creare usando anche un array Js scrivendo della logica condizionale come in questo esempio:

className={['shadow rounded multiple-transitions', (count > 4)? 'red-border' : '' ].join(' ')}

#react #javascript #jsx