Hur skapa-reagera-redux-app-struktur hjälper dig att starta ett projekt snabbare

Snabb ram. För att starta servern kör nod index.js från root-mapp.


räkna>

Filer är indelade i mappar, så om du inte behöver Node server bara ta bort index.js – fil och servern – mapp.

Som vi kör servern vi behöver för att leverera statiska filer .html .css .js, bilder. Så för att vi lyssnar rotmappen ./ och levererar index.html för två vägar som vi har.


räkna>

Reagera + Redux

Kolla in de mappar struktur.

Skapats med hjälp av https://creately.com

  • åtgärder – är nyttolast av information för att skicka data från din ansökan till din butik
  • komponenter -mapp har stumma mapp där dum eller presentationsmaterial – komponenter lagras och smart eller behållare komponenter också butik här
  • sidor – sidor som är baserade på rutter
  • förminskningsapparater-ange hur ansökan om tillstånd ändras i svar
  • -HTTP-begäran-filer för varje komponent
  • tjänster -återanvändbara globala tjänster, t ex Registrering, Anmälan service

namn=f57f>För mer information, du kan hoppa till valfri mapp och in filer inuti.

Inne sidor mapp du kan hitta App.jsx – fil. Det tar alla sidor och connect() Reagerar Redux butik med högre ordningens komponent.


räkna>

Spara

butiken är skapat i app/store.js – fil. Du kan se att i produktionsprocessen vi vill inte lägga redux-logger till middleware.


räkna>

Bygga Konfigurationer

Skript

ta en titt på skript i paket.json .


räkna>

kan Du se tre byggtyper dev, prod, staging. dev bygga kör vi Webpack och Klunk samtidigt som de inte är beroende av varandra.

Webpack

För produktion och iscensättning bygger vi behöver minify filer och ange processen miljö till produktion , så för att, vi är med webpack-merge


räkna>

CDN

Om du vill stödja CDN för statiska filer (js, css, bilder, typsnitt) du är välkommen. Ange i config.json filen assetHost URLvalue för att bygga där du vill använda CDN. När byggprocessen är klar kan du se prefix assetHost URL i roten index.html -filen och .css-bilder/fonter.

Klunk ersätta statiska filer:


räkna>

Grymta bilder och typsnitt inne:


räkna>

Du kan ladda ner den arkiv eller installera genom npm npm jag skapa-reagera-redux-app-struktur.

CLI stöds inte ännu och du har installerat paketet genom npm, gå till node_modules/skapa-reagera-redux-app-struktur för att få appen struktur.

Hoppas att det kommer att hjälpa dig att starta ditt projekt snabbare och enklare.

jag skulle gärna ha din hjälp. Om du har en idé hur man ska förbättra, ändra app struktur vänligen skicka in en pull-request eller skapa ett problem.

Tack för att du läser. Förslag, synpunkter, tankar är välkomna 🙂

till att Aldrig missa en berättelse från Vasyl Stokolosa

We will be happy to hear your thoughts

Leave a reply