Una delle cose che preferisco di React è proprio JSX.
La possibile integrazione di HTML dentro JavaScript rende molto piacevole scrivere un frontend.
Cosa è JSX?
Un estensione sintattica di JavaScript, che permette la scrittura di componenti usando una sintassi simile all’HTML.
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
Introducing JSX
Come funziona JSX?
La risposta è nella documentazione.
JSX non è altro che un modo piacevole per chiamare la funzione
React.createElement(component, props, ....children)In React, quando scriviamo un codice JSX come questo:
<Hello name="Matte1">
Cliccami
</Hello>Viene compilato, tramite Babel, in questa forma:
React.createElement(
Hello,
{name: 'Matte1'},
'Cliccami'
)Quindi se JSX non è altro che una codifica, invece di chiamare React.createElement possiamo chiamare una funzione definita che restituisca elementi da appendere al DOM.
jsx-no-react
Per puro caso, mi sono imbattuto in questa libreria che rende possibile utilizzare la piacevole sintassi JSX, senza però dover utilizzare React!
Il suo funzionamento è abbastanza semplice, tramite un plugin babel quando compiliamo il nostro codice viene chiamata la funzione jsxElem che si occuperà di creare l’elemento da inserire nella pagina.
L’idea mi è piaciuta subito, ho inviato qualche PR per aggiungere qualche funzionalità ed ora, grazie a questa libreria, possiamo scrivere codice utilizzando tutte le potenzialità che JSX offre.
Come sembra questo codice? Non è interessante come idea?
import jsxElem, { render } from "jsx-no-react";
function Hello(props) {
return <h1>Hello {props.name}</h1>;
}
const CustomSeparator = props => (
<i>{[...Array(props.dots)].map(idx => ".")}</i>
);
function App() {
return (
<div>
<Hello name="foo" />
<CustomSeparator dots={50} />
<Hello name="bar" />
</div>
);
}
render(<App />, document.body);Per vedere cosa è possibile fare, e come usarlo nei vostri progetti leggete il readme.
Ovviamente ci sono molte migliore da poter apportare a questo package, ogni nuova PR è ben accetta, può essere anche un buon inizio per collaborare con altri sviluppatori.
Ho personalmente utilizzato questa libreria per aggiornare il mio vecchio progetto e mi ci sono trovato veramente bene, se volete vedere il risultato fate un salto su problemidelvento.it e provate.
