Souhrn
Nedávno jsem aktualizoval svůj projekt spouštěče reakcí přidáním následujících významných změn:
- přizpůsobit více konfiguracím sestavení (dev a prod)
- umožňují specifikovat doplňky (bundleanalyzer, bundlebuddy) jako součást skriptů NPM
- přidal webpack-dashboard jako volitelný spouštěcí skript NPM
Nebyl jsem rozhodnutý mezi tím, zda zavést nebo nezavést pokročilejší knihovny, jako je například Redux a React-Router. Nakonec jsem se rozhodl vytvořit nový startovací projekt nazvaný reagovat-redux-starter, který slouží spíše jako pokročilý startovací projekt pro ty, kteří chtějí kromě Reactu pracovat s Redux a React-Router. Proto v tomto příspěvku popíšu, co je k dispozici v projektu reakce-redux-starter.
Přehled projektu
Projekt reakce-redux-starter je základní šablona, která se skládá ze základních prvků, které jsou nutné k zahájení vytváření aplikace pro jednu stránku (SPA) pomocí React, React Router, Redux, Bootstrap 4, Sass a Webpack.
Ačkoli tento projekt nazývám jakousi šablonou, je to také mini aplikace v tom, že demonstruje úplný vertikální řez architektury. To znamená, že existuje příklad Redux a React-Router v akci. Poskytuji velmi jednoduchou komponentu, která načte seznam PSČ. Udržel jsem příklad jednoduchý a poskytl jsem data prostřednictvím 'souboru PSČ JSON' . Tato jednoduchá součást však ilustruje použití akcí Redux, kontejneru Redux a úložiště Redux.
Následující diagram ilustruje, jak se data načítají pomocí Redux a Služby PSČ :
Funkce
Šablona se skládá z:
- typická struktura rozvržení projektu
- Nastavení a konfigurace Babel
- nastavení a konfigurace webového balíčku
- nastavení a konfigurace ESLint
- nastavení a konfigurace SCSS
- ukázková komponenta React k zobrazení seznamu PSČ
- nastavení Redux pro zpracování stavu PSČ
- Nastavení React Router pro zobrazení základní navigace
Kromě toho šablona poskytuje vývojovou a produkční konfiguraci webpacku.
Šablona také umožňuje zahrnout konkrétní pluginy jako součást sestavení. Další podrobnosti naleznete zde
Ukázka
Následující animované obrázky GIF ilustrují, jak aplikace vypadá.
Desktop
Mobilní
Vyvinuto s
- Visual Studio Code – Editor zdrojového kódu vyvinutý společností Microsoft pro Windows, Linux a macOS. Zahrnuje podporu pro ladění, vestavěné ovládání Git, zvýrazňování syntaxe, inteligentní dokončování kódu, úryvky a refaktorování kódu
- Node.js – Javascript runtime
- React – javascriptová knihovna pro vytváření uživatelských rozhraní
- React Router – deklarativní směrování pro React
- Redux – Redux je předvídatelný stavový kontejner pro aplikace JavaScript.
- Redux-Promise-Middleware – Redux middleware pro sliby, asynchronní funkce a podmíněné optimistické aktualizace
- Redux-Thunk – middleware Thunk pro Redux
- Babel – Transpiler pro javascript
- Webpack – balíček modulů
- SCSS – metajazyk css
- Bootstrap 4 – Bootstrap je open source sada nástrojů pro vývoj pomocí HTML, CSS a JS
Začínáme
Zde najdete projekt reakce-redux-starter.
Tyto pokyny vám umožní zprovoznit a spustit kopii projektu na vašem místním počítači pro účely vývoje a testování.
Předpoklady
Do vašeho systému je třeba nainstalovat následující software:
- Uzel 8.x
- Npm 3.x
Zadejte následující příkazy do terminálu, abyste ověřili své verze uzlu a npm
node -v
npm -v
Instalovat
Chcete-li spustit vývojové prostředí, postupujte podle následujících kroků.
- Klonujte 'react-redux-starter' úložiště z GitHubu
git clone https://github.com/drminnaar/react-redux-starter.git
NEBO POUŽITÍ SSH
git clone [email protected]:drminnaar/react-redux-starter.git
- Instalujte moduly uzlů
cd react-redux-starter
npm install
Sestavit
Sestavení aplikace
dev | prod |
---|---|
npm spustit build:dev | npm spustit build:prod |
Vytvářejte aplikaci a sledujte změny
dev | prod |
---|---|
npm spusťte build:dev:watch | npm spustit build:prod:watch |
Sestavení aplikace se zahrnutým modulem BundleAnalayzer
dev | prod |
---|---|
npm spusťte build:dev:bundleanalyze | npm spustit build:prod:bundleanalyze |
Po spuštění výše uvedeného příkazu se otevře okno prohlížeče s interaktivním grafem podobným následujícímu obrázku:
Sestavení aplikace se zahrnutým modulem BundleBuddy
dev | prod |
---|---|
npm spusťte build:dev:bundlebuddy | npm spustit build:prod:bundlebuddy |
Spusťte ESlint
Projekt Lint využívající ESLint
npm run lint
Lint Project pomocí ESLint a autofix
npm run lint:fix
Spustit
Spustit Start
Tím se spustí 'serve:dev' úkol npm
npm start
Spustit Dev Server
npm run serve:dev
Spustit Dev Server s řídicím panelem
npm run serve:dev:dashboard
Výše uvedený příkaz zobrazí ve vaší konzoli zobrazení řídicího panelu, které se podobá následujícímu obrázku:
Spustit Prod Server
Tento příkaz vytvoří aplikaci pomocí produkčního nastavení a spustí aplikaci pomocí živého serveru
npm run serve:prod
Závěr
Je vždy obtížné poskytnout výchozí bod, který je jednoduchý, ale dostatečně podrobný, aby ilustroval několik důležitých pojmů. Doufám, že tento projekt pomůže dosáhnout tohoto cíle. Postupem času budu aktualizovat a vylepšovat, abych se pokusil sladit projekt jako ideální výchozí bod pro učení se, jak vytvářet aplikace React pomocí Redux, Webpack a React Router.