Un tutorial completo su React Boilerplate - Da Zero a Hero

Quando stiamo iniziando a imparare React, per realizzare i nostri progetti dobbiamo creare una piastra da zero o utilizzare alcuni forniti dalla community. Quasi tutte le volte è l'app create-reply che utilizziamo per creare un'app senza configurazione build. Oppure realizziamo da zero la nostra semplice piastra di cottura.

Da questo, mi viene in mente: perché non realizzare un boilerplate con tutte le dipendenze che uso sempre e lasciarlo pronto? Anche la comunità ha pensato in questo modo, quindi ora abbiamo diverse piastre di caldaia create dalla comunità. Alcuni sono più complessi di altri, ma hanno sempre lo stesso obiettivo di risparmiare il massimo tempo.

Questo articolo ti insegnerà come costruire da zero la tua caldaia con le principali dipendenze utilizzate oggi nella comunità di React. Utilizzeremo alcune delle funzionalità moderne più comuni in questi giorni e da lì puoi personalizzarlo come preferisci.

La piastra della caldaia creata da questo articolo sarà disponibile qui!

Iniziare

Prima di tutto, creeremo una cartella per avviare la nostra caldaia. Puoi nominarlo come vuoi, io chiamerò il mio bolt-bolt.

Apri il tuo terminale e crealo in questo modo:

mkdir reazioni-bullone

Ora vai alla cartella creata e digita il seguente comando:

npm init -y

NPM creerà un file package.json per te e tutte le dipendenze che hai installato e i tuoi comandi saranno lì.

Ora creeremo la struttura di cartelle di base per il nostro boilerplate. Sarà così per ora:

reagire bullone
    | --config
    | --src
    | --tests

Webpack

Oggigiorno Webpack è il modulo-bundler più famoso per le applicazioni JavaScript. Fondamentalmente, raggruppa tutto il codice e genera uno o più bundle. Puoi saperne di più qui.

In questo bollettino lo useremo, quindi installa tutte queste dipendenze:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader

Ora nella nostra cartella di configurazione, creeremo un'altra cartella chiamata webpack, quindi all'interno di quella cartella webpack creeremo 5 file.

Crea un file chiamato paths.js. All'interno di quel file ci sarà la directory di destinazione per tutti i tuoi file di output.

Al suo interno, inserisci tutto questo codice:

Ora crea un altro file chiamato rules.js e inserisci qui il seguente codice:

Successivamente, creeremo altri 3 file:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Fondamentalmente, nel nostro file webpack.common.babel.js, abbiamo impostato la nostra configurazione di entrata e uscita e abbiamo incluso anche tutti i plug-in richiesti. Nel file webpack.dev.babel.js, abbiamo impostato la modalità di sviluppo. E nel nostro file webpack.prod.babel.js, abbiamo impostato la modalità di produzione.

Successivamente, nella nostra cartella principale, creeremo l'ultimo file webpack chiamato webpack.config.js e inseriremo il seguente codice:

La nostra configurazione webpack è pronta, quindi ora lavoreremo su altre parti della piastra della caldaia con Babel, ESLint, Prettier, ecc.

Babele

Penso che quasi tutti coloro che lavorano con React abbiano probabilmente sentito parlare di Babele e di come questo semplice transpiler aiuti le nostre vite. Se non sai di cosa si tratta, Babel è fondamentalmente un transpiler che converte il tuo codice JavaScript in un semplice vecchio JavaScript ES5 che può essere eseguito in qualsiasi browser.

Utilizzeremo un sacco di plugin Babel, quindi nella nostra cartella principale, installa:

npm install --save-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-proposta-classe-proprietà @ babel / plugin-proposta-oggetto-resto-diffusione @ babel / plugin-sintassi-dinamica- import @ babel / plugin-sintassi-import-meta @ babel / plugin-transform-async-to-generator @ babel / plugin-transform-runtime @ babel / preset-env @ babel / preset-reagire @ babel / register @ babel / runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

Dopodiché creeremo un file nella nostra cartella principale chiamato .babelrc e all'interno di quel file inseriremo il seguente codice:

Ora il nostro progetto è compilato da Babel e possiamo usare la sintassi JavaScript di prossima generazione senza problemi.

ESLint

Lo strumento più utilizzato per i progetti di lanugine al giorno d'oggi è ESLint. È davvero utile trovare determinate classi di bug, come quelle relative all'ambito delle variabili, assegnazione a variabili non dichiarate e così via.

Innanzitutto, installa le seguenti dipendenze:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-reagire

Quindi, nella nostra cartella principale, crea un file chiamato .eslintrc e inserisci qui il seguente codice:

Prettier

Prettier è fondamentalmente un formattatore di codice. Analizza il tuo codice e lo ristampa con le sue regole che tengono conto della lunghezza massima della riga, avvolgendo il codice quando necessario.

Devi solo installarlo:

npm install --save-dev più bello

E nella nostra cartella principale, crea un file chiamato .prettierrc e inserisci il seguente codice:

Reagire

React è una libreria di applicazioni JavaScript open source per creare interfacce utente. È stato sviluppato da Facebook e ha una grande comunità alle spalle. Se stai leggendo questo articolo, suppongo che tu sappia già di React, ma se vuoi saperne di più su di esso, puoi leggere qui.

Installeremo le seguenti dipendenze:

npm install --save reagire reag-dom cross-env

E all'interno della nostra cartella src, creeremo un semplice file HTML index.html e inseriremo il seguente codice:

Successivamente, creeremo un semplice progetto React. All'interno della nostra cartella src, crea un file index.js come questo:

All'interno della nostra cartella src avremo la seguente struttura:

src
    | --actions
    | --components
    | --reducers
    | --reducers
    | --store

Crea un file chiamato App.js nella cartella dei componenti e inserisci il seguente codice:

Redux

Redux semplifica la gestione dello stato della tua applicazione. Un altro modo di vedere questo è che ti aiuta a gestire i dati che visualizzi e come rispondi alle azioni dell'utente. Oggigiorno molte persone preferiscono altre opzioni come MobX o solo lo stesso setState, ma continuerò con Redux per questa piastra di cottura.

Innanzitutto, installeremo alcune dipendenze:

npm install --save redux reagire-redux redux-thunk

Quindi, creeremo il nostro negozio Redux e ci metteremo un po 'di stato. Nella nostra cartella del negozio, crea un file index.js e inserisci qui il seguente codice:

Ora, all'interno della nostra cartella riduttori creare un index.js e inserire il seguente codice:

Infine, andremo al nostro index.js nella nostra cartella src, avvolgeremo il codice con il e passeremo il nostro negozio come oggetti di scena per renderlo disponibile per la nostra applicazione.

Sarà così:

Tutto fatto. Il nostro negozio Redux è configurato e pronto all'uso.

Reagisci router

React Router è la libreria di routing standard per React. Fondamentalmente, mantiene l'interfaccia utente sincronizzata con l'URL. Lo useremo nella nostra piastra della caldaia, quindi installalo:

npm install --save reagire-router-dom

Dopodiché, vai sul nostro index.js nella nostra cartella src e racchiudi tutto il codice lì con .

Il nostro index.js nella nostra cartella src finirà così:

Componenti in stile

Styled Components rende CSS semplice per tutti, in quanto ti aiuta a organizzare il tuo progetto React. Il suo obiettivo è scrivere componenti più piccoli e riutilizzabili. Lo useremo e, se vuoi saperne di più, leggi qui.

Innanzitutto installalo:

npm install - salva i componenti in stile

Quindi, nel nostro file App.js all'interno della nostra cartella dei componenti, creeremo un semplice titolo utilizzando Styled Components. Il nostro titolo sarà così:

E all'interno del nostro file, dobbiamo importare componenti in stile, quindi il nostro file finirà in questo modo:

Libreria di test Jest & React

Jest è una libreria di test JavaScript open source di Facebook. Semplifica il test della tua applicazione e ci fornisce molte informazioni su cosa sta dando il giusto risultato e cosa no. La libreria di test React è una soluzione molto leggera per testare i componenti React. Fondamentalmente, questa libreria sostituisce Enzyme.

Ogni applicazione necessita di alcuni tipi di test. Non scriverò test in questo articolo ma ti mostrerò come configurare questi strumenti per iniziare a testare le tue applicazioni.

Innanzitutto installeremo entrambi:

npm install --save-dev jest jest-dom-test-library-library

Dopodiché, vai sul nostro package.json e inserisci quanto segue:

Quindi, vai alla nostra cartella di configurazione e al suo interno ha creato un'altra cartella chiamata test e all'interno di quella cartella, crea 2 file.

Innanzitutto, crea un file chiamato jest.config.js e inserisci il seguente codice:

Quindi, crea un file chiamato rtl.setup.js e inserisci il seguente codice:

Tutto fatto. Il nostro boilerplate è pronto per l'uso e puoi usarlo ora.

Ora vai al nostro file package.json e inserisci il seguente codice:

Ora, se esegui il comando npm start e vai su localhost: 8080, dovremmo vedere la nostra applicazione che funziona bene!

Se vuoi vedere il mio codice finale, la piastra della caldaia creata da questo articolo è disponibile qui!

Ho alcune idee per alcune funzionalità che mi piacerebbe includere nella piastra della caldaia, quindi non esitate a contribuire!

Seguimi su Twitter!
Seguimi su GitHub!

Sto cercando un'opportunità remota, quindi se ne ho qualcuno che mi piacerebbe sentirne parlare, quindi per favore contattami!