React starter kit: React redux with hooks

Från och till kodar jag mycket i React.js vilket jag tycker är superkul. Från början lärde jag mig det inför att vara assistent i kursen Kommunikation och användargränssnitt på LiU – och sedan valde jag att fortsätta använda det på sommarjobb och i egna projekt. Nu är jag inne på en ny runda som assistent i samma kurs och satte ihop detta exempel i samband med det. Det är helt enkelt en liten utbyggnad av ett starterkit som React erbjuder, där jag har lagt till enkel routing samt datahantering med Redux. Själv tänkte jag spana in dessa starter-kits och fortsätta justera på en eller flera setups som passar mig bäst.

Tree Hacks Hackathon 2019!

Precis NU i skrivande stund är det deadline för att skicka in sitt resultat för Tree Hacks 2019. Nöjd och glad över att jag lyckades få ihop något! Jag hade egentligen planerat ända sedan i höstas om att vara men men sen hoff poff var helgen här och jag har tokmycket plugg. Min plan ändradet till att istället vara på plats, gå på workshops och plugga däremellan. Jag blev dock lite för peppad och nästan halvvägs in i hacket bestlutade jag mig för att skapa ett bidrag ändå. På TreeHacks GitHub finns en massa bra starter-packs för olika slags projekt (mobil, webb, IoT, ML osv) och jag blev taggad på att prova på ett Chrome-plugin. 

I år är de tre stora tävlingskategorierna Health, Safety och Awereness. Därpå finns det ett gäng tävlingskategorier som företag håller i, t ex använder man Docker, Google Cloud, Azure eller FireBase har man chans att vinna respektive företags utmaning. Jag såg till att få med ViX och fokuserade på Awereness-kategorin. Extra kul att det fanns utvecklare på plats från företagen ändå in på småtimmarna för tips och pepp. Istället för att googla kunde man alltså bara gå fram nappa åt sig en utvecklare!

Jag skapade ett Chrome-plugin som kan hinta om att innehåll på en webbsida möjligen är fake-news. I och med tidspressen kollade jag mest av att det fungerade mot Facebook, med det lär fungera även på t ex Twitter efter att ha finjusterat koden till att vara lite mer robust. Skapade alltså också en ViX-site som fick stå för en enkel exempelsamling av cirkulerande rykten. Liten databas med tillhörande REST API så att jag kunde hämta data från Chrome-projektet. 

HÄR har vi mitt bidrag inkludeat kod på GitHub, en filmsnutt, beskrivning och lite bilder. Om ett par timmar är det showcase och bedömning! Bland andra har vi en från Mythbusters-gänget med i juryn(?!) Udda och skoj, heja på mig tack!

Mitt Chrome-plugin varnar om det skrivs ett inlägg som låter misstänkt och tipsar om att läsa på lite innan en skapar sig en uppfattning.
Jury att möta om ett par timmar!

Enkelt webbprojekt med React.js

Så många timmar som jag har spenderat på att försöka komma igång med olika kodprojekt alltså. Felmeddelanden efter felmeddelanden. Jahapp, detta kan inte köras tillsammans med detta och jaha nehe ”Uncaught TypeError: Cannot read property ’loaded’ of undefined”. Det är verkligen något som får min motivation att blåsa iväg som ett litet löv.

Som laborationsassistens, under pluggprojekt och nu i sommar har jag kodat webbsidor med React.js. Här hittar ni en snabb liten beskrivning på vad det är. Ett litet utdrag: ”React är ett bibliotek med JavaScript-kod, avsedd för programmering av dynamiska grafiska användargränssnitt. Med att de är dynamiska menas att de kan förändras medan de visas utan att man behöver läsa in sidan på nytt.”

Tycker själv att det är kul med React och jag har nu ordnat ett litet projekt för er att enkelt testa! Min förhoppning är att jag har gjort projektet så simpelt och oberoende av en massa konfiguration att ni slipper allt arbete just för att komma igång. Jag menar det är nyttigt att kunna men kanske tråkigt att börja med.

Det ska egentligen bara vara att hämta ner projektmappen från min GitHub, öppna kodeditorn och börja. För enkelhetens skull använder jag CDN-länkar för att hämta React och vad mer som behövs. Det går också att starta ett projekt med NPM men då får man mer med kommandotolken att göra och en hel del andra filer att bekanta sig med.

Kom igång

Har du Git installerat kan du öppna Git Bash och klona ner projektet. Annars går det bra att bara hämta ner som zipfil.

Om du inte har installerat en lokal server på din dator så verkar det som att webbläsaren Firefox är den enda som tillåter dig att köra projektet. Högerklicka på index.html och välj öppna med Firefox. (( OBS! ))

Om du har en lokal server och ändar apache root-folder till projektmappen borde det fungera även för Chrome exempelvis. Jag rekomenderar att ladda ner UniformServer. Kräver ingen installation och tar inte stor plats på datorn. Klicka sedan på Start Apache och projektets startsida bör dyka upp. Se till att addressen är localhost/index.html eller möjligen localhost/#/ om det är så att default är index.php.

Ytterligare några tips är:

Använd en shysst editor och dra in hela projektmappen, t ex: Visual Studio Code
Skapa grafiskt innehåll: Sketchpad
Generera favicon: favicon-generator

___
 
Hör gärna av er till mig eller kommentera om ni testar.
Kul att se era resultat + så jag vet om mer sådant här önskas. Lycka till!