React.js introduktion
En svær start
Det viste sig at React.js var meget mere kompliceret end jeg troede. Jeg prøvede bare at lave et react project med 'npx create-react-app' i terminal, og så kom der et projekt. Problemet var bare, at jeg overhovedet ikke kunne finde hoved og hale i det, og derfor var jeg nødt til at gå et par skridt tilbage, og starte med noget mere simpelt. Jeg begyndte derfor på en ES6 / JavaScript tutorial, så jeg kunne få en mere basic forståelse af JavaScript syntaks. I tutorialen anbefalede han at man brugte TypeScript, så det fik jeg også opsat. Herefter kunne jeg teste med en standard 'Hello world'!
JavaScripts' quirks
Noget af det første jeg stødte på, var at JavaScript har en del sjove quirks sammenlignet med C#. Eksempelvis behøver du ikke at sætte semikolon i slutningen af sætninger, men i stedet tilføjer "compileren" det automatisk. Dog kunne jeg læse mig frem til, at det stadig er anbefalet at skrive, så den vane vil jeg ikke af med. Derudover er der noget som hedder "var hoisting". I C# er jeg vant til at variabler har deres scopes alt efter i hvilken kontekst de dekklareres, men i JavaScript, kan man sagtens tilgå en var som er inde i en if-statement. What!?
React
Det var så på tide at lave min første React komponent, og hermed har jeg lavet den simple "Greet" komponent, som simpelthen bare siger 'Hello Martin'. En komponent er derfor bare en JavaScript funktion som returnere noget HTML (JSX for af være specifik), som så bliver renderet i Appen.
Starten på et produkt!
Jeg blev lidt træt af at følge tutorials, og ville gerne prøve at begynde på produktet til den frie bibel. Jeg lavede derfor et React projekt til frontend og et backend Node projekt. Tanken var at API'en skulle sende noget json der inkludere den bibeltekst brugeren gerne vil læse, så jeg begyndte at lave noget eksempel JSON som JavaScript skulle arbejde med.
Det handlede herefter om at behandle denne data på en rigtig måde. Jeg vidste fra deres tidligere hjemmeside, at de gerne vil have at brugeren selv kan konfiguere deres læseoplevelse. Jeg kodet derfor en funktion som deler JSON'en op i linjer, hvor disse linjer så kan behandles forskelligt. Jeg synes egentlig selv det blev et fint resultat.
Pointen er også at brugeren skal kunne navigere fra bog til bog og kapitel til kapitel, så jeg lavede også noget JSON, som skulle repræsentere en liste af de bøger hjemmesiden tilbyder, samt antallet af kapitler. Dette kunne herefter indsættes i en select, og kombineres med bootstrap.
Til sidst lærte jeg også lidt om state og props, hvor props er værdier man kan sætte ind udefra, og state er de værdier komponenten internt har og gemmer. Her er det vigtigt, at man holder tungen i munden, da man skal overveje hvordan systemet indsætter værdien. Ved callback kommer værdien rigtig ind i state, mens ved synchronous, kan værdien godt gå tabt.
