React Redux Starter

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.