Categorie
JavaScript

JSX senza React

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.

Di matte1

Matteo Barison aka matte1 || f107.

Provo ad essere un Full Stack Developer, uno scout, cerco di cogliere il meglio dal disagio che ci circonda.