Updates files containing jsx to use .jsx extension

lab1/README.md

@@ -16,6 +16,6 @@
     2. Vilka paket är installerade?
     3. Vilka beroenden har React?
     4. Vilka komponenter existerar från början? ___Hint: React Devtools Extension___ 
-    5. Ersätt texten "Edit src/App.js and save to reload." med "Peace, Love & OP Web". Du behöver INTE kompilera om vid ändringar!
+    5. Ersätt texten "Edit src/App.jsx and save to reload." med "Peace, Love & OP Web". Du behöver INTE kompilera om vid ändringar!
     6. Lek runt lite! 
 

lab2/DO_NOT_README.md

@@ -2,15 +2,15 @@
 
 ## Task 2
 
-I `App.js`:
+I `App.jsx`:
 
 ```javascript
 <List title={"Users"} items={/*TODO: Task 4 */ []} />
 ```
 
 ## Task 3
 
-I `App.js`:
+I `App.jsx`:
 
 ```javascript
 const changeBackgroundColor = (e) => {
@@ -21,15 +21,15 @@ const changeBackgroundColor = (e) => {
 
 ## Task 4
 
-I `App.js`:
+I `App.jsx`:
 
 ```javascript
 <List title={"Users"} items={users} />
 ```
 
 ## Task 6
 
-I `List.js`:
+I `List.jsx`:
 
 ```javascript
     render() {
@@ -45,7 +45,7 @@ I `List.js`:
 
 ## Task 7
 
-I `List.js`:
+I `List.jsx`:
 
 ```javascript
 const onKeyPressed = (e) => {
@@ -56,7 +56,7 @@ const onKeyPressed = (e) => {
 
 ## Task 8
 
-I `List.js`:
+I `List.jsx`:
 
 ```javascript
     render() {

lab2/README.md

@@ -6,14 +6,14 @@ Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå se
 
 ## Uppgift
 
-1. Bekanta dig med hur applikationen är uppbyggt komponentmässigt. Utgå från `App.js`.
+1. Bekanta dig med hur applikationen är uppbyggt komponentmässigt. Utgå från `App.jsx`.
 2. Byt titel ("\*Insert title") på `List`-komponenten genom att skicka in ett annat värde för rätt `prop`.
-3. Just nu går det inte att byta bakgrundfärg. Komponenten `App.js` har ett `state` för sidans bakgrundsfärg (`bgColor`). Använd callbacken från `BackgroundColorPicker` för att få färgväljaren att fungera. Hur sätts själva färgen?
+3. Just nu går det inte att byta bakgrundfärg. Komponenten `App.jsx` har ett `state` för sidans bakgrundsfärg (`bgColor`). Använd callbacken från `BackgroundColorPicker` för att få färgväljaren att fungera. Hur sätts själva färgen?
 4. Skicka in en lista med användare som `prop` till komponenten `List`. Hur hämtas listan med användare?
 5. Användarna syns fortfarande inte listade. Använd **React Devtools Extension** för att verifiera att komponenten `List` har fått in en lista med användare.
-6. Rendera ut lista med användare i `return()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast).
-7. Nu vill vi kunna filtrera listan. I `List.js` använder vi komponenten `SearchBar` som tar en callback, `onKeyPressed`. Vad vill vi göra då? Implementera `onKeyPressed()` i `List.js`!
-8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `items`.
+6. Rendera ut lista med användare i `return()` i komponenten `List.jsx`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast).
+7. Nu vill vi kunna filtrera listan. I `List.jsx` använder vi komponenten `SearchBar` som tar en callback, `onKeyPressed`. Vad vill vi göra då? Implementera `onKeyPressed()` i `List.jsx`!
+8. Nu när `List.jsx` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `items`.
 
 ## Jag har tid över, vad gör jag nu?
 

lab3/DO_NOT_README.md

@@ -41,7 +41,7 @@ I `userReducers.js`:
 
 ### Task 5
 
-I `Container.js`:
+I `Container.jsx`:
 
 ```javascript
 useEffect(() => {
@@ -51,7 +51,7 @@ useEffect(() => {
 
 ### Task 6
 
-I `List.js`:
+I `List.jsx`:
 
 ```javascript
 const users = useSelector((state) => state.users.all);

lab3/README.md

@@ -10,21 +10,21 @@ Från projektroten: `$ cd lab3`, `$ npm install` följt av `$ npm start`. Gå se
 2. Bakgrundsfärgen är satt till `lavender` från början via initialState. Byt default från `lavender` till `gold`._Hint: Detta görs i en reducer_
 3. Användarna visas inte i listan just nu. Börja med att dispatcha ett action när användare har hämtats asynkront i `userActions`.
 4. När vi har dispatchat en action måste vi hantera den i våra reducers. Öppna `userReducers.js` och stoppa in resultatet från din nya action i applikationens state.
-5. I `Container.js` har vi nu möjlighet att dipatcha actions tack vare vår hooks `useDispatch()`. Vi vill här hämta alla användare när komponenten mountas i `useEffect()` med vår nyss implementerade action creator. Implementera detta och bekräfta att det fungerar med Redux Dev Tools.
-6. Nu när vi har användaren i vår store vill vi kunna läsa dom i komponenten `List.js`. Deklarera konstanten `users` i `List.js` med hjälp av `useSelector()`. Just nu är den bara en tom array. _Hint: Hur används `useSelector()` i `container.js`?_
+5. I `Container.jsx` har vi nu möjlighet att dipatcha actions tack vare vår hooks `useDispatch()`. Vi vill här hämta alla användare när komponenten mountas i `useEffect()` med vår nyss implementerade action creator. Implementera detta och bekräfta att det fungerar med Redux Dev Tools.
+6. Nu när vi har användaren i vår store vill vi kunna läsa dom i komponenten `List.jsx`. Deklarera konstanten `users` i `List.jsx` med hjälp av `useSelector()`. Just nu är den bara en tom array. _Hint: Hur används `useSelector()` i `container.js`?_
 7. Nu ska applikationen fungera fullt ut!
 
 ## Del 2 - Egen komponent
 
-Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.js` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata baserat på ett id.
+Nu är det dags att sätta allt du lärt dig hittills på prov. Gör så långt du hinner. Uppgiften är att du ska skapa en egen komponent och visa detaljerad användarinformation i denna. I `List.jsx` finns det nu en callback, `onClick`, som kommer att skicka med ett id för användaren som klickades på. I `api.js` finns det en funktion som hämtar användardata baserat på ett id.
 
 För att lösa uppgiften behöver du:
 
-- Skapa en ny komponent `<UserDetails>` (eller liknande namn) och använda denna i `Container.js`.
+- Skapa en ny komponent `<UserDetails>` (eller liknande namn) och använda denna i `Container.jsx`.
 - `<UserDetails>` behöver rendera ut JSX för detaljerad användardata.
 - Skapa en ny action creator i `userActions.js` som tar in ett id och gör ett asynkront anrop mot `api.js` för att hämta ut detaljerad användardata.
 - Utöka state för `userReducers.js` till att även innehålla detaljerad användardata och hantera en ny typ av inkommande action.
-- Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `useDispatch()`.
+- Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.jsx` via `useDispatch()`.
 - Läsa in den detaljerade användardatan från applikationens state till din nya komponent.
 
 ##### _Del två finns löst i solutions-branchen om du bara vill se lösningen_ 😇