Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Usare JSX e React

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

JSX è simile a un mix tra XML e HTML. Userete JSX all'interno del codice React per creare facilmente componenti per la vostra applicazione. JSX diventa JavaScript quando React compila il codice.

Il bello di React consiste nel poter creare codice riutilizzabile per strutturare facilmente la vostra app con mentalità orientata ai componenti. Inoltre, il divario tra la visualizzazione wireframe di idee semanticamente strutturate e la loro implementazione non è mai stato così ridotto.

Primo assaggio di JSX

Ecco un esempio JSX usato per il rendering HTML:

Per creare un componente usate una variabile locale che comincia con una lettera maiuscola, ad esempio:

Nota: ci sono parole dedicate in JSX, dato che in fondo è fondamentalmente JavaScript — così parole chiave come class e for non sono incoraggiate come nomi d'attributo. Invece, i componenti React richiedono i nomi delle proprietà di React come className e htmlFor, ad esempio.

Tags nidificati

Specificate gli elementi figlio all'interno di JSX in questo modo:

Testare JSX

Per testare JSX usate Babel REPL.

Sotto-Componenti e Namespaces

La creazione dei form è facile con JSX e sotto-componenti, per esempio:

Per farlo funzionare dovete creare i sotto-componenti come attributi del componente principale:

Espressioni

Per usare JavaScript per la creazione di un risultato per l'utilizzo in un valore d'attributo, React necessita di parentesi graffe {}:

Potete anche passare un valore booleano per gli attributi di un form come disabled, checked e via dicendo. Questi valori possono essere scritti interamente in HTML se preferite.

Attributi Spread

Quando volete impostare attributi multipli, assicuratevi di farlo al momento della dichiarazione del componente e mai dopo. La dichiarazione successiva diventa un anti-pattern pericoloso, il che significa che potreste non avere il dato corretto fino a molto dopo l'esecuzione.

Aggiungete proprietà multiple al vostro componente usando il nuovo spread operator ... di ES6.

Commenti in JSX

Potete usare i commenti // e multi-linea /* ... */ all'interno di JSX. Per esempio:

Trabocchetti comuni con JSX

Ci sono alcune cose che possono confondere certe persone con JSX, per esempio quando aggiungiamo attributi agli elementi HTML nativi che non esistono nelle specifiche HTML.

React non fornirà il rendering di alcun elemento nativo HTML non inserito nelle specifiche a meno che non aggiungiate il prefisso data- in questo modo:

Inoltre, il rendering HTML all'interno di contenuto dinamico può fare confusione a causa dell'escaping e della protezione XSS che React ha in dotazione. Per questa ragione, React mette a disposizione dangerouslySetInnerHTML.

Esempio di un'Applicazione Chat

Potreste aver visto l'app Gitter. È un'applicazione web di chat in real-time indirizzata in particolare agli sviluppatori. Molte persone la stanno usando per discutere i propri progetti su GitHub, per la semplicità di integrazione con GitHub e la possibilità di creare canali per le repository. 

Questo genere di applicazione può facilmente essere sviluppata con React implementando l'API WebRTC per creare una chat p2p nel browser. Per questo useremo i moduli per Node PeerJs e socket.io.

Per fornirvi un'idea chiara dell'architettura dell'applicazione, ecco un semplice diagramma low-level UML:

filefilefile

ChatServer riceve i messaggi di segnale con PeerJS, e ogni client verrà utilizzato come proxy per prendersi cura dell'attraversamento NAT.

Cominceremo l'applicazione da zero per fornirvi un quadro completo di come creare applicazioni React. Prima creiamo una nuova directory per l'applicazione e aggiungiamo un file package.json.

Questo file package.json viene usato da npm per configurare facilmente l'applicazione. Specifichiamo le nostre dipendenze: express, un framework web che useremo per servire l'applicazione; peer, il server peerjs che useremo per inviare segnali; socket.io che verrà usato per il polling e l'implementazione di webRTC. react-bootstrap e bootstrap sono packages per l'utilizzo del framework CSS di Twitter per dare stile all'applicazione.

Avremo inoltre bisogno di packages addizionali, ma per questi useremo bower.

Create un file bower.json e aggiungete:

Con questa configurazione, ci prendiamo react, jQuery, bootstrap, eventEmitter per emettere eventi e la libreria Client peerJS per includere WebRTC.

Infine, specifichiamo dove installarli impostando il file .bowerrc:

Da qui, sedetevi e installate le dipendenze tramite:

Una volta che questa istruzione è terminata, vedrete una nuova directory node_modules e src/lib. Queste contengono i moduli pronti all'utilizzo.

Ora create un file app.js nella directory principale accanto al vostro package.json, etc. Questo sarà il punto d'avvio principale dell'applicazione.

Questo creerà semplicemente un server Express, rendendo i files in src/ che abbiamo appena ottenuto con bower ora accessibili tramite HTTP. Quindi un'istanza socket.io è stata creata per rimanere in ascolto dell'oggetto expressServer. Verrà usata per il polling e per facilitare il prossimo passaggio per PeerServer, che svolgerà in realtà la parte di chat WebRTC.

Per configurare PeerServer, tutto ciò che dovrete fare sarà specificare port e path su cui girerà il server, e poi iniziare a configurare gli eventi con il metodo .on. Useremo un file separato denominato Events.js per specificare gli eventi della nostra app.

Useremo qui l'evento events.CONNECT per specificare quando un utente è connesso all'applicazione. Verrà usato dagli stati dei nostri componenti view per aggiornare le visualizzazioni in real time.

Per farlo, dobbiamo creare il Server per le connessioni peer-to-peer attraverso il proxy.

Create un file in src/Server.js e aggiungete:

Questa è la parte principale dell'applicazione. Qui configuriamo l'oggetto ChatServer con tutte le sue funzioni.

Prima usiamo socket.io per stabilire la segnalazione di un nuovo utente connesso attraverso events.CONNECT in questo modo:

Poi, per connettersi a PeerServer usiamo:

Rimaniamo quindi in ascolto degli eventi tramite il metodo on:

Abbiamo inoltre JSX all'interno dei componenti nella directory components/chat. Prendetevi il tempo per visionarli tutti nella repository. Ci concentreremo sul componente ChatBox per il momento:

Questa classe utilizza ChatServer che abbiamo creato prima, sfruttandolo come proxy per il componente ChatBox.

I componenti e le librerie sono finalmente presenti nella pagina index.html e servite tramite node express.

Per avviare l'app, eseguite npm start e indirizzate il browser verso http://localhost:3001 per osservare la chat.

Live su Heroku

Servire l'applicazione dal cloud è davvero facile con Heroku. Registratevi con un account gratuito e potrete installare il toolbelt heroku sul vostro sistema. Approfondite come impostare Heroku nell'Heroku Dev Center.

Ora che avete disponibile Heroku accedete e create un nuovo progetto come di seguito:

Otterrete un nome casuale da Heroku e l'URL della vostra app — nel nostro esempio http://sharp-rain-871.herokuapp.com/. Heroku genera anche una repository git per questa applicazione.

Ora è semplice come fare il pushing del codice in heroku:

Una volta terminato il push, sarete in grado di avviare il servizio web nel modo seguente:

Ora visitate l'URL fornito, o usate come scorciatoia l'istruzione open:

Conclusioni

Avete appreso come creare componenti JSX e interfacciarli con React, con un esempio dettagliato dell'applicazione chat. Prendetevi del tempo per consultare il codice e vedere come lavorano React e la directory components/chat.

Combinata alla distribuzione su Heroku, potete iniziare ad hackerare e creare le vostre applicazioni React per il cloud!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.