Undervisning i hur man använder Redux genom att bygga it

Undervisning i hur man använder Redux genom att bygga det

Sistone har jag gett en hel del ES2015, Reagera och Redux utbildning. Jag har insett att det bästa sättet att göra mina elever lära sig Redux är genom att göra dem att bygga upp sin egen version.

Detta är inte en ny metod. Det finns många exempel som har inspirerat mig att undervisa på detta sätt. För att nämna några:

De alla delar samma grundläggande “recept”:

  1. Definiera de grundläggande delmängd av bibliotekets funktioner.
  2. Använda ett exempel ansökan om att genomföra din egen leksak version som täcker de definierade funktioner, se till att denna version delar en gemensam API med riktigt bibliotek. Kod lösningen steg för steg.
  3. När detta är gjort, ersätta din version med den riktiga och bevisa att de exempel app fungerar fortfarande.

Till exempel, i min senaste Reagera och Redux träningspass jag gjorde följande:

  1. Definiera åtgärder och förminskningsapparater och testa dem med hjälp av webbläsaren konsolen.
  2. Kod en anpassad createStore.
  3. Kombinera två reduceringar av sidan.
  4. Kod en anpassad combineReducers – funktion och refaktorera koden.
  5. Skapa ett exempel App med funktionella Reagera komponenter för att definiera UI.
  6. Skapa en koppla – HOC och refaktorera alla anslutna komponenter.
  7. Skapa en Leverantör och göra koppla HOC-använda-butik.

Du kan se resultatet i detta .

för Denna övning får mig att lära mina elever flera Reagera och Redux begrepp med hjälp av modern JS: ren funktioner, oföränderlighet, skillnaden mellan klass och funktionella komponenter, samband API, komponent livscykel, Hög Beställa Komponenter, etc.

för Att framgångsrikt tillämpa denna metod för att lära ut den mest viktig del är att göra eleverna aktiva aktörer. Fråga dem hur koden varje del och låt dem upptäcka de fördelar och nackdelar med lösningen.

Du bör prova detta nästa gång du har att lära ut hur man använder någon teknik. Det är värt besväret.