Impostare un ambiente di reazione, parte 2

Se sei nuovo in React allora, comprensibilmente, vuoi solo ottenere il codice e giocare con alcuni componenti semplici per vedere come funziona React. Davvero non vuoi dover passare un lungo processo di installazione in prima istanza.

In questo tutorial ti mostrerò come iniziare a programmare con React in pochi secondi, rimuovendo quasi completamente il processo di installazione! Utilizzerai CodePen, un editor di codice online, che ti consente di iniziare a scrivere codice React all'istante.

Un utile effetto collaterale dell'uso di editor di codice online è che puoi facilmente condividere il tuo lavoro con gli altri tramite un URL univoco. Tutto ciò che crei può anche essere cercato da altri sviluppatori che cercano esempi basati su React.

Diamo un'occhiata a CodePen e vediamo quanto è facile impostare React e iniziare a codificare la tua prima app!

CodePen

CodePen ti dà accesso a tre finestre per modificare HTML, CSS e JavaScript, oltre a un'altra finestra per il rendering dell'output. È possibile utilizzare CodePen completamente gratuitamente e non è nemmeno necessario registrarsi per un account per condividere il proprio lavoro. Tuttavia, se si utilizza il servizio regolarmente, si potrebbe voler considerare l'apertura di un account in modo da poter compilare un profilo e iniziare a costruire un portafoglio.

Ogni nuova creazione in CodePen è chiamata "penna". Vai alla homepage e fai clic sul grande Creare pulsante in alto a destra dello schermo, quindi Nuova penna dal menu a discesa.

A seconda delle impostazioni predefinite, i tre editor si troveranno sul lato sinistro / destro della finestra principale o disposti in alto in un'unica riga.

La finestra di output CodePen viene aggiornata automaticamente ogni volta che si digita una qualsiasi delle finestre dell'editor. Questo è opzionale e può essere disabilitato tramite le impostazioni della penna.

Configurazione delle impostazioni

Prima di poter scrivere qualsiasi codice React, dobbiamo importare gli script necessari della libreria e configurare il nostro processore JavaScript. Useremo JSX all'interno dei componenti di React e alcune funzionalità di ES6, quindi per essere sicuri che l'editor di codice CodePen possa interpretare il nostro codice, abbiamo bisogno di uno strumento che utilizzi il nostro codice JSX ed ES6 e lo compili fino allo standard JavaScript che può essere eseguito da tutti i browser.

Useremo Babel come nostro compilatore JavaScript, così sarai in grado di utilizzare in sicurezza tutte le ultime funzionalità di JavaScript senza doversi preoccupare della compatibilità del browser. Il supporto aggiunto per la compilazione JSX è un vantaggio reale in quanto significa che è necessario utilizzare solo uno strumento.

Per abilitare Babel in CodePen, dobbiamo configurare le impostazioni della nostra penna. Clicca il impostazioni pulsante nel menu in alto a destra, quindi acceso JavaScript nel Impostazioni penna finestra di dialogo che appare. Possiamo anche aggiungere qui le librerie richieste di React.

Clicca sul Quick-add menu a discesa e selezionare Reagire dalla lista. Si noti che React viene aggiunto alla prima casella di input con il percorso completo della libreria specificata. Fai nuovamente clic sul menu a discesa per aggiungere Reagire DOM. Questo è necessario perché stiamo rendendo i nostri componenti React al DOM del browser.

Finalmente, sotto il Preprocessore JavaScript menu a discesa, selezionare Babele. Il tuo Impostazioni penna la finestra di dialogo dovrebbe ora assomigliare a questa:

Le versioni esatte degli script React e React DOM possono essere leggermente diverse sullo schermo dato che CodePen si aggiornerà inevitabilmente all'ultima versione di volta in volta.

Clic Vicino per tornare all'interfaccia principale di CodePen. Si noti che accanto al JS etichetta nella finestra dell'editor JavaScript, un ulteriore (Babele) etichetta è stata aggiunta per ricordare che il JavaScript verrà passato attraverso il compilatore Babel prima che venga eseguito nel browser.

La nostra prima app di React

Nella finestra dell'editor HTML CodePen, aggiungi un singolo 

 elemento. Questo serve da segnaposto vuoto che la nostra app React può utilizzare per rendere visibile il nostro componente.

Non è necessario aggiungere molto HTML manualmente poiché React gestisce per noi l'aggiunta e l'aggiornamento degli elementi DOM. Neanche noi aggiungeremo alcun CSS alla nostra penna, quindi sentitevi liberi di ridisporre le finestre in modo che l'editor JavaScript e la finestra di output abbiano più spazio disponibile.

Nella finestra dell'editor JavaScript, inserisci il codice seguente per aggiungere il nostro primo componente.

classe MyFirstComponent estende React.Component render () return ( 
Ciao da React!
 )

Questa è praticamente la versione più semplice di un componente possibile in React. Abbiamo usato una classe ES6 per estendere la classe del componente React core, che implementa a render () metodo e restituisce un elemento HTML.

Per visualizzare il nostro componente, dobbiamo chiamare il ReactDOM.render () metodo:

ReactDOM.render ( , document.querySelector ('#app'));

Il primo argomento è il componente React che si desidera eseguire il rendering e il secondo specifica quale elemento DOM eseguire il rendering.

Creiamo ora un altro paio di componenti React. Innanzitutto, aggiungi questo frammento alla finestra HTML:

Ora aggiungi un'altra definizione di componente alla finestra di JavaScript:

classe MySecondComponent estende React.Component render () return ( 
Il mio secondo componente di reazione.
 )

Il secondo componente è molto simile al primo e lo rendiamo al div elemento con id di app2 con un'altra chiamata a ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Tuttavia, non è molto efficiente visualizzare i singoli componenti in questo modo. L'approccio attualmente accettato è quello di definire un componente di primo livello come , che contiene tutti gli altri componenti nella tua app React. Quindi, tutto ciò di cui hai bisogno è una sola chiamata a RenderDOM.render (), piuttosto che una chiamata separata per ogni componente.

Rifacciamo la nostra semplice applicazione React per utilizzare questo approccio ai componenti di alto livello.

In primo luogo, rimuovere il

Ora, se volessimo aggiungere alcune informazioni a  e  ma non volevo necessariamente specificarlo all'interno delle definizioni del componente? Possiamo farlo passando le informazioni ai componenti figlio dai componenti principali usando l'attributo HTML come la sintassi. Questo è sapere come oggetti di scena in React.

Dimostriamo ciò passando le informazioni sulla numerazione ai nostri due componenti annidati. Cambiare il definizione da essere:

la classe App estende React.Component render () return ( 
 
I miei primi componenti di reazione!
   
 )

Abbiamo aggiunto due numero oggetti di scena che verranno passati a ciascun componente figlio e resi disponibili tramite un oggetto JavaScript. All'interno delle definizioni dei componenti, possiamo accedere agli oggetti di scena tramite oggetti di scena oggetto come segue:

classe MyFirstComponent estende React.Component render () return ( 
this.props.number: Ciao da React!
 )

classe MySecondComponent estende React.Component render () return ( 
this.props.number: My Second React Component.
 )

Ricapitoliamo rapidamente su come è stato facile iniziare a programmare con React usando CodePen.

In primo luogo, abbiamo aperto una nuova penna e configurato le impostazioni per aggiungere le dipendenze dello script React e ReactDOM. Abbiamo anche aggiunto il preprocessore Babel JavaScript per compilare il codice JSX ed ES6 su JavaScript standard.

Quindi, è stato solo un semplice caso di aggiungere i nostri componenti React all'editor JavaScript. Infine, per visualizzare i nostri componenti nella finestra di output, abbiamo inserito a

elemento come punto di montaggio per la nostra app React nella finestra dell'editor HTML.

Conclusione

Usando CodePen, puoi ottenere un componente React in uscita sullo schermo in appena un paio di minuti! Tuttavia, ha alcune limitazioni.

Le migliori pratiche di Modern React per lo sviluppo di React consigliano un approccio modulare, con ogni componente in un file separato. Non puoi farlo con la versione base di CodePen.

Inoltre, poiché la finestra di output di CodePen è incorporata all'interno di un elemento iframe, non hai accesso al browser. Gli strumenti di sviluppo di React sono una considerazione importante in quanto le tue app diventano più complesse.

Per i principianti, però, e per testare rapidamente nuove idee per semplici app, CodePen è un ottimo strumento per lo sviluppo di React. Puoi anche usarlo per creare un portfolio online o come la tua mini-libreria di componenti React pronti per essere incollati in altri progetti. Ci sono molti altri editor di codice online simili a CodePen come JSFiddle, JS Bin e molti altri.

Nel prossimo tutorial, ci concentreremo sull'impostazione di app React localmente.

Codice