Abbiamo iniziato la scorsa settimana a tradurre un articolo sulle migliori pratiche in React.js nel 2016. Ecco il resto...

Componenti

Molte persone si lamentano di JSX. Prima di tutto, dovresti sapere che è facoltativo in React.
In definitiva, JSX è ancora compilato in JavaScript con Babel. Quindi puoi scrivere JavaScript invece di JSX, anche se sembra più naturale usare JSX fintanto che lavori in HTML.
Così, i profili meno tecnici potranno continuare a comprendere e manipolare questa parte del fronte del Fronte.

JSX è un'estensione della sintassi JavaScript simile a XML. Puoi utilizzare un semplice trasformatore di sintassi con React – JSX in dettaglio

Se vuoi saperne di più su JSX, dai un'occhiata all'articolo JSX sembra un abominio, ma fa bene.

Usa le classi

React funziona bene con le classi ES2015.

class HelloMessage extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>
    }
}

Preferiamo i componenti di alto livello ai mixin, quindi per noi abbandonare ` createClass` è stata più una questione di sintassi che un problema tecnico. Crediamo che non ci sia nulla di sbagliato nell'utilizzare `createClass` al posto di `React.Component` e viceversa.

PropType

Se non stai ancora controllando le tue proprietà, dovresti iniziare a farlo nel 2016. Può farti risparmiare qualche ora, fidati.

MyComponent.propTypes = {
    isLoading: PropTypes.bool.isRequired,
    items: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                name: PropTypes.string.isRequired,
            })
    ).isRequired
}

Sì, è possibile convalidare le proprietà di Immutable.js utilizzando react-immutable-proptypes.

Componentistica di alto livello

Ora che i mixin sono morti e non sono più supportati nelle classi di componenti ES6, abbiamo cercato un nuovo modo per farlo.
Che cos'è un componente di primo livello?

PassData({ foo: 'bar' })(MyComponent)

Semplicemente, stai componendo un nuovo componente da un altro e ne stai estendendo il comportamento. Puoi usarlo in un sacco di situazioni come l'autenticazione requireAuth({ ruolo: 'admin' })(MyComponent) (verifica l'utente nel componente di primo livello e reindirizza se l'utente non è autenticato) oppure collega il tuo componente a un negozio Flux/Redux.
In RisingStack, ci piace già separare il recupero dei dati e la logica del controller in componenti di alto livello per mantenere le nostre opinioni il più semplici possibile.

Tester

I test con una buona copertura dovrebbero essere una parte importante del ciclo di sviluppo. Fortunatamente, la comunità React.js fornisce eccellenti librerie per farlo.

Componenti di prova

Una delle nostre librerie preferite per testare i componenti è Enzyme di Airbnb . Grazie alla sua funzionalità di "rendering superficiale", è possibile testare la logica e il rendering dei componenti, il che è davvero fantastico! Non sostituisce ancora i test con Selenium, ma porta i test frontend a un livello superiore.

it('simulates click events', () => {
    const onButtonClick = sinon.spy()
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />)
    wrapper.find('button').simulate('click')
    expect(onButtonClick.calledOnce).to.be.true
})

È pulito, giusto?
Stai usando la libreria di asserzioni Chai? C'è un'integrazione chai-enzima.

Prova Redux

Testare un reducer dovrebbe essere semplice: risponde alle azioni in ingresso e passa da uno stato all'altro.

it('should set token', () => {
    const nextState = reducer(undefined, {
        type: USER_SET_TOKEN,
        token: 'my-token'
    })
    // immutable.js state output
    expect(nextState.toJS()).to.be.eql({
        token: 'my-token'
    })
})

Testare le azioni è semplice finché non si iniziano a utilizzare azioni asincrone. Per testare le azioni Redux asincrone, consigliamo di dare un'occhiata a redux-mock-store ; può essere molto utile.

it('should dispatch action', (done) => {
    const getState = {}
    const action = { type: 'ADD_TODO' }
    const expectedActions = [action]
    const store = mockStore(getState, expectedActions, done)
    store.dispatch(action)
})

Per test Redux più approfonditi , si prega di consultare la documentazione ufficiale.

Usa NPM

Anche se React.js funziona bene senza un packager, ti consigliamo di utilizzare Webpack ou Sfogliare per sfruttare la potenza di NPM. NPM è ricco di pacchetti React.js di qualità e può aiutare a gestire le dipendenze in modo elegante.
(Ricordati di riutilizzare i tuoi componenti, è un ottimo modo per ottimizzare il tuo codice)

Dimensione del pacchetto

Questa domanda non è esclusiva di React, ma poiché la maggior parte delle persone impacchetta la propria applicazione React, ho pensato che fosse importante affrontarla.
Mentre impacchettate le vostre fonti, prestate sempre attenzione alle dimensioni del vostro pacco. Per mantenere questa dimensione il più piccola possibile, devi prendere in considerazione il modo in cui definisci l'importazione/requisito delle tue dipendenze.
Il codice di esempio riportato di seguito mostra due diversi approcci che possono fare un'enorme differenza nell'output.

import { concat, sortBy, map, sample } from 'lodash'
// vs.
import concat from 'lodash/concat';
import sortBy from 'lodash/sortBy';
import map from 'lodash/map';
import sample from 'lodash/sample';

Guarda l'articolo Riduci le dimensioni del tuo file bundle.js facendo questa cosa per i dettagli.
Ci piace anche dividere il nostro codice in almeno uno venditore.js et app.js perché gli aggiornamenti alle librerie di terze parti sono meno comuni degli aggiornamenti alla codebase.
Eseguendo l'hashing dei nomi dei file di output (pezzi di hash in WebPack) e nascondendoli per lunghi periodi di tempo, puoi ridurre drasticamente la dimensione del codice che deve essere scaricato per far tornare gli utenti al sito. In combinazione con il caricamento lento, puoi immaginare come questo possa essere ottimale.
Se non conosci WebPack, dai un'occhiata a questo fantastico articolo Ricettario React WebPack.

Ricarica a caldo dei componenti

Se hai mai scritto un'applicazione a pagina singola (SPA) con ricarica a caldo (aka livereload), probabilmente sai quanto può essere fastidioso quando stai lavorando su un componente con stato e l'intera pagina viene ricaricata perché hai appena salvato nel tuo editor. Tutto quello che devi fare è cliccare di nuovo nella tua applicazione e ricominciare con ogni registrazione, ancora e ancora...
Con React, è possibile ricaricare un componente mentre mantenendo il suo stato – boom, niente più problemi!

Usa ES2015

Stavo dicendo che utilizziamo JSX nei nostri componenti React.js con cui traspiliamo babel.js.

Babel può fare molto di più e permette anche di scrivere codice ES6/ES2015 per i browser di oggi. In RisingStack, utilizziamo le funzionalità ES2015 lato server e lato client disponibili sull'ultima versione LTS di Node.js.

Linter

Forse hai già utilizzato una "guida di stile" per il tuo codice JavaScipt ma sai che ce ne sono altrettante per React? Ti consigliamo vivamente di sceglierne uno e iniziare a seguirlo.
In RisingStack, imponiamo l'esecuzione di linter sul server di integrazione continua e sul spingere anche, pure. Dai un'occhiata al pacchetto pre-spinta ou pre-impegnarsi.
Usiamo "JavaScript Stand Style per JavaScript" con eslint-plugin-reagire per controllare il nostro codice React.js.
(Esatto, non usiamo più il punto e virgola.)

GraphQL e relè

GraphQL e Relay sono tecnologie relativamente nuove. In RisingStack, non li utilizziamo in produzione in questo momento, li teniamo solo d'occhio.
Abbiamo scritto una libreria denominata graffiti che è un MongoDB ORM per Relay e consente di creare un server GraphQL da modelli mongoose esistenti.
Se vuoi imparare queste nuove tecnologie ti consigliamo di dare un'occhiata e giocarci.

Cosa ricordare da questa reazione sulle "migliori pratiche".

Molte delle tecniche e delle librerie mostrate non sono esclusive di React.js. È sempre bene tenersi aggiornati e osservare cosa fanno gli altri membri della community. Nel 2015, la community di React si ispirava fortemente all'architettura Elm .

Se hai un'idea degli strumenti essenziali di React.js che tutti gli sviluppatori dovrebbero utilizzare nel 2016, scrivici!

 
Articolo originariamente scritto da Pietro Martone CTO a Pila in aumento
Traduit par Matteo Bretone CTO a JS Repubblica
[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]