Möjliga tenta frågor

Konceptuella Frågor och Svar

1. Statehantering med useState

Fråga: Vad är useState, och hur används det i en React-komponent?
Svar:
useState är en hook i React som används för att hantera komponentens lokala state. Den returnerar en array med två element:

1. Den aktuella state-variabeln

2. En funktion för att uppdatera state

Exempel:

jsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Räknaren är: {count}</p>
      <button onClick={() => setCount(count + 1)}>Öka</button>
    </div>
  );
}

Varje gång knappen klickas, uppdateras count och komponenten renderas om.

2. Props

Fråga: Vad är skillnaden mellan props och state?
Svar:

• Props skickas från en förälder till en barnkomponent och är oföränderliga.

• State hanteras inom komponenten och kan ändras under programmets gång.

Exempel på props:

jsx

function Greeting({ name }) {
  return <h1>Hej, {name}!</h1>;
}

<Greeting name="Alice" />; // Renderar: "Hej, Alice!"
 

3. Livscykelhantering med useEffect

Fråga: När exekveras en useEffect-hook?
Svar:
useEffect exekveras:

• Vid varje render (om ingen beroende-array anges).

• Vid mount (första renderingen) om en tom array [] anges.

• När någon av beroendena i arrayen ändras.

Exempel:

jsx 

useEffect(() => {
  console.log("Komponenten har renderats!");
}, []); // Körs endast vid första renderingen

4. React Router och Hooks

Fråga: Hur navigerar man till en ny sida programatiskt i React Router?
Svar:
Man använder useNavigate-hooken:

jsx

import { useNavigate } from "react-router-dom";

function HomePage() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/dashboard")}>
      Gå till Dashboard
    </button>
  );
}

När knappen klickas, navigerar användaren till /dashboard.

5. Context API

Fråga: Hur skapar och använder man en Context-provider?
Svar:
Man skapar en Context med createContext() och omger sina komponenter med en Provider.

jsx

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ username: "Alice" }}>
      <Dashboard />
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  return <p>Välkommen, {user.username}!</p>;
}
 

Dashboard-komponenten får tillgång till username utan att behöva props.

createContext och en Provider används i Reacts Context API för att hantera global state och undvika prop drilling.

• createContext: Skapar ett nytt context som kan delas mellan komponenter.

• Provider: En wrapper-komponent som gör contextens värde tillgängligt för alla dess barnkomponenter.

Exempel:

const UserContext = createContext(); // Skapar ett nytt context

function App() {
    const user = { name: "Alice", age: 25 };

    return (
        <UserContext.Provider value={user}>
            <Profile />
        </UserContext.Provider>
    );
}

function Profile() {
    const user = useContext(UserContext); // Åtkomst till contextens värde
    return <p>Namn: {user.name}, Ålder: {user.age}</p>;
}

Här kan Profile-komponenten få tillgång till user utan att props behöver skickas manuellt genom flera komponenter.

6. Kontrollerad vs Okontrollerad komponent

Fråga: Vad är skillnaden mellan en kontrollerad och en okontrollerad komponent?
Svar:

• Kontrollerad komponent hanterar värdet via useState:

  jsx
  
  function ControlledInput() {
    const [text, setText] = useState("");
  
    return <input value={text} onChange={(e) => setText(e.target.value)} />;
  }
  

• Okontrollerad komponent använder useRef för att läsa värdet direkt från DOM:en:

  jsx
  
  function UncontrolledInput() {
    const inputRef = useRef();
  
    const handleSubmit = () => {
      console.log(inputRef.current.value);
    };
  
    return <input ref={inputRef} />;
  }
   

Kodanalys och tekniska frågor

1. Kodanalys av useState

Fråga: Vad händer när knappen klickas i koden nedan?

jsx

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Räknaren är: {count}</p>
      <button onClick={() => setCount(count + 1)}>Öka</button>
    </div>
  );
}

Svar:
Varje gång knappen klickas, anropas setCount(count + 1), vilket uppdaterar count och gör att komponenten renderas om med det nya värdet.

2. Kodanalys av useEffect

Fråga: Hur många gånger exekveras denna useEffect?

jsx

useEffect(() => {
  console.log("Komponenten har renderats!");
}, []);
 

Svar:
Eftersom beroende-arrayen [] är tom, exekveras useEffect endast en gång vid den första renderingen.

3. React Router kodanalys

Fråga: Vad gör useNavigate i koden nedan?

jsx

import { useNavigate } from 'react-router-dom';

function HomePage() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/dashboard')}>Gå till Dashboard</button>
  );
}

import Reatc,{useNavigate} from 'react';
function HomePage(){
const navigate= useNavigate();
return(
<button onClick={()=> navigate('/dashbord)'}>Gå till dashboard</button>
);}

Svar:
useNavigate används för att programatiskt navigera användaren till /dashboard när knappen klickas.

Design och lösningsförslag

1. Skapa en komponent som visar en lista av meddelanden

Fråga: Skriv en React-komponent som tar emot en lista av meddelanden och visar dem, med en fallback om listan är tom.

Svar:

jsx

function MessageList({ messages = [] }) {
  if (messages.length === 0) {
    return <p>Inga meddelanden att visa.</p>;
  }

  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>
          <p>{msg.text} - {msg.timestamp}</p>
          {msg.important && <strong>Viktigt!</strong>}
        </li>
      ))}
    </ul>
  );
}

2. Skapa en kontrollerad komponent för formulär

Fråga: Skriv en kontrollerad komponent som tar emot en textinput och skickar värdet när användaren klickar på en knapp.

Svar:

jsx

function CommentForm({ onSubmit }) {
  const [comment, setComment] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment.trim()) {
      onSubmit(comment);
      setComment(""); // Nollställ fältet
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={comment} 
        onChange={(e) => setComment(e.target.value)}
        placeholder="Skriv en kommentar..."
      />
      <button type="submit">Skicka</button>
    </form>
  );
}

Sammanfattning

• Konceptuella frågor testar förståelsen av React-koncept.

• Kodanalys och tekniska frågor handlar om att tolka och förklara kod.

• Design och lösningsförslag kräver att du skriver kod baserat på en specifikation.

Konceptuella Frågor

1. Statehantering med useState

Fråga: Vad är useState, och varför används det i React?
Svar:
useState är en React-hook som används för att hantera komponentens lokala state. Den returnerar en array med två element:

1. Den aktuella state-variabeln

2. En funktion för att uppdatera state

Exempel:

jsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Räknaren är: {count}</p>
      <button onClick={() => setCount(count + 1)}>Öka</button>
    </div>
  );
}

När setCount(count + 1) anropas, uppdateras count och komponenten renderas om med det nya värdet.

2. Props

Fråga: Vad är skillnaden mellan props och state i React?
Svar:

• Props (properties) skickas från en förälder till en barnkomponent och är oföränderliga.

• State hanteras inom en komponent och kan ändras över tid med useState.

Exempel på en komponent som tar emot props:

jsx

function Greeting({ name }) {
  return <h1>Hej, {name}!</h1>;
}

<Greeting name="Alice" />; // Renderar: "Hej, Alice!"

Här kan name inte ändras av Greeting-komponenten.

3. Livscykelhantering med useEffect

Fråga: Vad är skillnaden mellan att anropa useEffect med och utan beroende-array ([])?
Svar:

• Utan beroende-array: Körs efter varje render.

  jsx
  
  useEffect(() => {
    console.log("Render!");
  });
  

• Med en tom array ([]): Körs endast en gång vid första renderingen (motsvarar componentDidMount).

  jsx
  
  useEffect(() => {
    console.log("Komponenten har mountats!");
  }, []);
   

• Med beroenden i arrayen: Körs när någon av beroendena ändras.

  jsx
  
  useEffect(() => {
    console.log("count ändrades!");
  }, [count]);
   

4. React Router och Hooks

Fråga: Hur fungerar useNavigate i React Router?
Svar:
useNavigate används för att programatiskt navigera användaren till en annan sida.

Exempel:

jsx

import { useNavigate } from "react-router-dom";

function HomePage() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/dashboard")}>
      Gå till Dashboard
    </button>
  );
}
 

När knappen klickas, skickas användaren till /dashboard.

5. Context API

Fråga: När bör du använda Context API istället för props?
Svar:

• När data behöver delas mellan flera komponenter på olika nivåer i komponentträdet.

• För att undvika prop drilling (att skicka props genom flera komponenter).

Exempel:

jsx

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ username: "Alice" }}>
      <Dashboard />
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  return <p>Välkommen, {user.username}!</p>;
}

Här kan Dashboard få tillgång till username utan att behöva ta emot det som en prop.

6. Kontrollerad vs Okontrollerad komponent

Fråga: Vad är en kontrollerad komponent i React?
Svar:
En kontrollerad komponent har sitt värde hanterat av React state istället för DOM.

Exempel:

jsx

function ControlledInput() {
  const [text, setText] = useState("");

  return (
    <input 
      value={text} 
      onChange={(e) => setText(e.target.value)} 
    />
  );
}
 

Här lagras texten i text-state, vilket gör komponenten kontrollerad.

Kodanalys och Tekniska Frågor

1. useEffect-kodanalys

Fråga: Vad händer i följande kod?

jsx

useEffect(() => {
  console.log("Komponenten har renderats!");
}, []);
 

Svar:
Eftersom beroende-arrayen [] är tom, kommer useEffect endast köras en gång, vid den första renderingen.

2. React Router kodanalys

Fråga: Vad gör useParams i React Router?
Svar:
useParams används för att hämta URL-parametrar i en dynamisk rutt.

Exempel:

jsx

import { useParams } from "react-router-dom";

function UserProfile() {
  const { userId } = useParams();

  return <h1>Profil för användare {userId}</h1>;
}

Om vi besöker /profile/123, kommer det att rendera:
"Profil för användare 123".

Design och Lösningsförslag

1. Bygg en komponent som visar en lista av meddelanden

Fråga: Skriv en React-komponent som tar emot en lista av meddelanden och visar dem. Om listan är tom ska texten "Inga meddelanden att visa" visas.

Svar:

jsx

function MessageList({ messages = [] }) {
  if (messages.length === 0) {
    return <p>Inga meddelanden att visa.</p>;
  }

  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>
          <p>{msg.text} - {msg.timestamp}</p>
          {msg.important && <strong>Viktigt!</strong>}
        </li>
      ))}
    </ul>
  );
}
 

2. Bygg en kontrollerad formulärkomponent

Fråga: Skriv en kontrollerad komponent för ett textfält som skickar en kommentar när användaren trycker på en knapp.

Svar:

jsx

function CommentForm({ onSubmit }) {
  const [comment, setComment] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment.trim()) {
      onSubmit(comment);
      setComment(""); // Nollställ fältet
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={comment} 
        onChange={(e) => setComment(e.target.value)}
        placeholder="Skriv en kommentar..."
      />
      <button type="submit">Skicka</button>
    </form>
  );
}

Denna komponent uppdaterar comment-state vid varje tangenttryck och skickar in kommentaren vid onSubmit.

Tentafrågor och svar – Web Frameworks in JavaScript (React)

DEL 1: Konceptuella Frågor

1. Statehantering med useState

Fråga:
Vad är useState, och hur fungerar det? Förklara med ett exempel där en komponent hanterar en räknare.

Svar:
useState är en React-hook som används för att hantera state i en funktionell komponent. När state uppdateras med setState, renderas komponenten om med det nya värdet.

Exempel:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Antal klick: {count}</p>
      <button onClick={() => setCount(count + 1)}>Öka</button>
    </div>
  );
}

Här används useState(0), vilket betyder att count startar med värdet 0. När knappen klickas, uppdateras count och komponenten renderas om.

2. Props

Fråga:
Vad är props i React? Hur skiljer sig props från state?

Svar:

• Props (förkortning av "properties") är oföränderliga och skickas från en förälder till en barnkomponent.

• State hanteras internt i en komponent och kan ändras med hjälp av useState.

Exempel:

jsx

function Greeting({ name }) {
  return <h1>Hej, {name}!</h1>;
}

<Greeting name="Alice" />; // Renderar: "Hej, Alice!"

Här skickas name som en prop till Greeting, men den kan inte ändras inuti Greeting-komponenten.

3. useEffect och Komponentens Livscykel

Fråga:
Hur fungerar useEffect i React? När används den, och hur påverkar beroende-arrayen [] dess beteende?

Svar:

• useEffect används för att hantera biverkningar i en React-komponent, såsom:

  • Datahämtning

  • Manipulation av DOM

  • Eventlyssnare

• Beroende-arrayen [] styr när effekten körs:

  • Utan array: Körs vid varje render

  • Tom array []: Körs en gång vid montering

  • Med beroenden [count]: Körs när count ändras

Exempel:

jsx

useEffect(() => {
  console.log("Komponenten har renderats!");
}, []); // Körs en gång vid montering

4. React Router och Hooks

Fråga:
Vad gör useNavigate i React Router? Förklara med ett exempel.

Svar:
useNavigate används för att navigera programatiskt mellan sidor i en SPA (Single Page Application).

Exempel:

jsx

import { useNavigate } from "react-router-dom";

function HomePage() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/dashboard")}>
      Gå till Dashboard
    </button>
  );
}

När knappen klickas, skickas användaren till /dashboard utan att sidan laddas om.

5. Context API

Fråga:
Vad är Context API, och hur kan det användas för att undvika prop drilling?

Svar:
Context API används för att skicka data genom komponentträdet utan att behöva skicka den som props på varje nivå.

Exempel:

jsx

const UserContext = React.createContext();

function Dashboard() {
  const user = useContext(UserContext);
  return <p>Välkommen, {user.username}!</p>;
}

function App() {
  return (
    <UserContext.Provider value={{ username: "Alice" }}>
      <Dashboard />
    </UserContext.Provider>
  );
}

Här kan Dashboard direkt få tillgång till username via useContext(UserContext).

DEL 2: Kodanalys och Tekniska Frågor

1. useEffect-kodanalys

Fråga:
Vad gör följande kod, och när kommer console.log att köras?

jsx

useEffect(() => {
  console.log("Komponenten har renderats!");
}, [count]);

Svar:
console.log("Komponenten har renderats!"); kommer att köras varje gång count ändras.

2. React Router kodanalys

Fråga:
Vad gör useParams i React Router?

Svar:
useParams hämtar URL-parametrar från en dynamisk rutt.

Exempel:

jsx

import { useParams } from "react-router-dom";

function UserProfile() {
  const { userId } = useParams();

  return <h1>Profil för användare {userId}</h1>;
}

Om vi besöker /profile/123, kommer det att rendera:
"Profil för användare 123".

DEL 3: Design och Lösningsförslag

1. Bygg en komponent som visar en lista av meddelanden

Fråga:
Skriv en React-komponent som tar emot en lista av meddelanden och visar dem. Om listan är tom ska texten "Inga meddelanden att visa" visas.

Svar:

jsx

function MessageList({ messages = [] }) {
  if (messages.length === 0) {
    return <p>Inga meddelanden att visa.</p>;
  }

  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>
          <p>{msg.text} - {msg.timestamp}</p>
          {msg.important && <strong>Viktigt!</strong>}
        </li>
      ))}
    </ul>
  );
}

Här används .map() för att iterera över meddelanden, och om listan är tom visas fallback-texten.

2. Bygg en kontrollerad formulärkomponent

Fråga:
Skriv en kontrollerad komponent för ett textfält där användaren kan skriva in en kommentar och skicka den.

Svar:

jsx

function CommentForm({ onSubmit }) {
  const [comment, setComment] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment.trim()) {
      onSubmit(comment);
      setComment(""); // Nollställ fältet
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={comment} 
        onChange={(e) => setComment(e.target.value)}
        placeholder="Skriv en kommentar..."
      />
      <button type="submit">Skicka</button>
    </form>
  );
}

Här används useState för att hantera värdet i inputfältet, vilket gör det till en kontrollerad komponent.

Sammanfattning

• Konceptuella frågor testar förståelsen av React-koncept.

• Kodanalys och tekniska frågor handlar om att tolka och förklara kod.

• Design och lösningsförslag kräver att du skriver kod baserat på en specifikation.

Konceptuella frågor

1. Vad är syftet med useState i React?
   Svar: useState används för att hantera och uppdatera komponentens tillstånd. Det returnerar ett tillståndsvärde och en funktion för att uppdatera det värdet.

2. Hur fungerar props i React?
   Svar: Props är ett sätt att skicka data från en förälder till en barnkomponent. De är immutabla, vilket innebär att barnkomponenten inte kan ändra dem direkt.

3. Vad är skillnaden mellan en kontrollerad och en okontrollerad komponent i React?
   Svar: En kontrollerad komponent hanterar sitt värde via Reacts tillstånd (useState), medan en okontrollerad komponent använder direkt DOM-manipulation via t.ex. useRef.

4. När används useEffect och vilka beroenden kan anges?
   Svar: useEffect används för att köra kod vid olika skeden i komponentens livscykel. Det kan ha tre olika beroenden:

   • Ingen dependencies-array: Effekt körs vid varje render.

   • Tom array []: Effekt körs en gång vid mount.

   • Specifika beroenden [dependency]: Effekt körs när beroenden ändras.

5. Vad gör React Router och vilka hooks är vanliga att använda?
   Svar: React Router används för att hantera klientbaserad routing i en React-applikation. Vanliga hooks är:

   • useNavigate för att programmatisk navigera

   • useParams för att hämta URL-parametrar

   • useLocation för att få information om nuvarande plats

6. Vad används Context API till?
   Svar: Context API används för att hantera global state i en React-applikation och undvika prop drilling.

7. Vad gör useRef i React och när kan det vara användbart?
   Svar: useRef skapar en referens till ett DOM-element eller ett värde som inte orsakar omrenderingar vid uppdatering. Det används ofta för att hantera fokus, lagra värden mellan renders eller för att interagera med tredjepartsbibliotek.

   Kodanalys och tekniska frågor

   8. Vad gör följande kod och vad skrivs ut i konsolen?

function Counter() {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        console.log("Count updated:", count);
    }, [count]);

    return (
        <button onClick={() => setCount(count + 1)}>
            Klicka: {count}
        </button>
    );
}

Svar: Koden definierar en räknare som uppdateras varje gång knappen klickas. useEffect körs varje gång count ändras, vilket innebär att konsolen kommer skriva ut:

Count updated: 1 Count updated: 2 Count updated: 3 ...

9.Vad är felet i denna kod och hur kan det åtgärdas?

jsx

function Example() {
    const [text, setText] = useState("");

    useEffect(() => {
        console.log(text);
    });

    return (
        <input 
            type="text" 
            value={text} 
            onChange={(e) => setText(e.target.value)} 
        />
    );
}

Svar: useEffect saknar en dependencies-array, vilket gör att effekten körs vid varje render. För att åtgärda detta och endast lyssna på text-förändringar, lägg till [text] som dependency:

jsx

useEffect(() => { 
    console.log(text); 
}, [text]);

Design och lösningsförslag

10. Vilka props bör en komponent som visar en lista av meddelanden ta emot?
    Svar:

• messages: En array av meddelanden där varje meddelande har en text, timestamp och en isImportant flagga.

11. Hur kan man säkerställa att en komponent visar en fallback-text om listan av meddelanden är tom?
    Svar: Kontrollera om listan är tom eller undefined och visa en fallback-text om så är fallet:

jsx

{messages?.length > 0 ? (
    messages.map((msg) => <Message key={msg.id} {...msg} />)
) : (
    <p>Inga meddelanden att visa.</p>
)}

Kod övning

import React,{useState} from "react";
function Counter(){
const [count, setCount] = useState(0);

return (
<div>
<p> Count:{count}</p>
<Button onClick={()=> setCount(count+1)}>Öka</Button>
<Button onClick={()=> setCount(count-1)}>Minska</Button>
</div>
);}

import React,{useState} from "react";

function Raknare(){
const [count , setCount] = useState(0);
return(
<div>
<p>Räknaren är: {count}</p>;
<Button onClick{()=> setCount(count+1)}>Öka</Button>
<Button onClick{()=> setCount(count-1)}>Minska</Button>
);
}

import React from "react";

function Message({text,timestamp,important}){
return(
<div>
<p>{text}</p>
<small>{timestamp}</small>
{important && <span>Viktigt</span>}
</div>
);
}


import React from"react";

function Message({text,timestamp,important})
return(
<div>
<p>{text}</p>
<p>{timestamp}</p>
{important && <spam>Viktigt!</span>
</div>
);}


import React from 'react';
function Messages({text,timestamp,important}){
return(
<div>
<p>{text}</p>
<small>{timestamp}</small>
{important && <span>Viktigt</span>
</div>
);}

import React,{useEffect,useState} from "react";

function FetchData(){
const [data,setData] = useState(null);

useEffect(()=>{
fetch('https://localhost:3000/data')
.then(response=>response.json())
.then(data=>setData(data));
},[]);

return (
<div>
{data?<p>{data.message}</p>: <p>Loading...</p>}
</div>
);
}


impoert React,{useEffect,useState}from 'react';
function FetchData(){
const [data,setData]=useState(null);

useEffect(()=>{
fetch('http://loclahost:3000/data')
.then(response=>response.json())
.then(data=>(setData(data));
},[]);

return(
<div>
{data ? <p>{data.message}</p> : <p>Loading...</p>
</div>
);}



import React,{useEffect,useState} from 'react';

function FetchData(){
const [data,setData] = useState(null);
useEffect(()=>{
fetch('http://loclahost:3000/data')
.then(response=>response.json())
.then(data=>setData(data));
},[]);

return (
<di>
{data} ? <p>{data.message}</p> : <p>Loading...</p>
</div>
);}


import React,{useEffect,useState} from 'react';
function FetchData(){
const [data,setData] = useState(null);
useEffect(()=>{
fetch('http//:localhost:3000/data')
.then(response=>response.json())
.then(data=>setData(data));
.catch(error=>(console.log("erro");
},[]);
return(
<div>
{data}?{deta.message}:<p>Loading...</p>
</div>
);
} 


import React,{useEffect,useState} from 'react';
function FetchData(){
const[data,setData]= useState(null);
useEffect(()=>{
fetch('http//:localhost:3000/data')
.then(response=>response.json)
.then(data=>setData(data)
.catch(error=>console.log("error"));
},[]);
return (
<div>
{data}?{data.messages}: <p>Loading...</p>
</div>
);}

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
function Home(){return <h2>Home</h2>;}
function About(){return <h2>About</About>;}
function App(){
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}


import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
function Home() {return <h2>Home</h2>;}
function About(){return <h2>About</h2>;}
return(
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</nav>
</div>
</Router>
);
}

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
function Home(){return <h2>{Home}</h2>;}
function About(){return <h2>{About></h2>;}
return(
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</nav>
</div>
</Router>
);
}

import React from 'react';
import{BrowserRouter as Router, Route,Link} from 'react-router-dom';
function Home() {return <h2>Home</h2>;}
function About(){return <h2>About</h2>;}
return(
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="About">About</Link>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</nav>
</div>
</Router>
);
}



import React,{BrowserRouter as Router,Route,Link} from 'react';
function Home(){return <h2>Home</h2>};
function About(){return <h2>About</h2>};
return(
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about"</Linke>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</nav>
</div>
</Router>
);}

import React,{createContext, useContext, useState} from 'react';
const ThemeContext = createContext();

function Mycomponent(){
const [theme,setTheme]= useState('light');
return(
<ThemeContext.Provider value={{theme,setTheme}}>
<Content />
</ThemeContext.Provider>
);}
function Content(){
const {theme} = useContext=(ThemeContext);
return (
<button onClick={()=> setTheme(theme==='light' ? 'dark': 'light')}> {theme === 'light' ? <p>Light Mode</p> : <p>Dark Mode</p>}
</button>
);
}


import React,{createContext, useContext, useState} from 'react'; 
const ThemeContext = createContext();
function MyApp(){
const [theme,setTheme] = useState=('light');
return(
<ThemeContext.Provider value{{theme,setTheme}}
<Content/>
</ThemeContext.Provider>
function Content(){
const {theme} = useContext(ThemeContext);
return(
<div>
<button onClick={()=>setThem(theme==='light'?'dark':'light')}> {theme ==='light' ? <p>Light Mode</p> : <p>Dark Mode</p>}
</button>
</div>
);
}

import React,{createContext, useContext,useState} from 'react';
const ThemeContext = createContext();
function MyApp(){
const [theme,setTheme] = useState('light');
return(
<ThemeContext.Provider value{{theme,setTheme}}
<Content/>
</ThemeContext.Provider>
function Content(){
const {theme} = useContext(ThemeContext);
return(
<div>
<button onClick={()=>setTheme(theme==='light'?'dark':'light')}> {theme ==='light'}?<p>Light Mode</p> : <p>Dark Mode</p>}
</button>
</div>
);
}


import React,{createContext,useContext,useState} from 'react'
const ThemeContext=createContext();
function MyApp(){
const[theme,setTheme] = useState('light');
return(
<ThemeContext.Provider value{{theme,setTheme}}
<Content/>
</ThemeContext.Provider>
function Content(){
const {theme} = useContext(ThemeContext);
return(
<div>
<button onClick={()=>setTheme(theme==='light' ? 'dark' : 'light')}> {theme==='light'}? <p>Light Mode</p> : <p>Dark Mode</p>
</button>
</div>
);
}

import React,{useContect,createContext,useState} from 'react';
const ThemeContext = useContext();
function MyApp(){
const [theme,setTheme] = usestate('light');
return(
<createContext.Provider value{{theme,setTheme}}>
<Content/>
</createContext.Provider>
return(
<div>
<button onClick={()=>setTheme(theme==='light' ? 'dark' : 'light')}> {theme==='light} ? <p>Light Mode </p> : <p> Dark Mode </p>
</div>
);}

import React from 'react';
function MessageList({messages}){
if(!messages|| messages.length===0){
return <p>Inga meddelanden att visa.</p>
}
return(
<ul>
{messages.map(message=>(
<li key={messages.timestamp}>
<p>{message.text}</p>
<small>{messages.timestamp}</small>
{message.important && <span>Viktigt</span>}
</li>
))}
</ul>
);
}

import React from 'react';
function MessageList({messages}){
if(!messages||messages.length===0)
return <p>Inga meddelande att visa </p>
return(
<ul>
{messages.map(messages=>(
<li key={messages.timestamp}>
<p>{messages.text}</p>
<small>{messages.timestamp}</small>
{messages.important && <span>Viktigt</span>
</li>
))}
</ul>
);}

import React from 'react';
function MessageList({messages}){
if(!messages||messages.length===0)
return <p>Inga meddelande </p>
return (
<ul>
{messages.map(messages=>(
<li key={messages.timestamp} >
<p>{messages}</p>
<small>{messages.text}</small>
{messages.important && <span>Viktigt!</span>
</li>
))}
</ul>
);
}

import React from 'react';
function MessageList({messages}){
if(!messages||messages.length===0)
return <p>Inga meddelande </p>
return (
<div>
<ul>
{messages.map(messages=>(
<li key={messages.timestamp}>
<p> {messages} </p>
<small>{messages.text}</small>
{messages.important && <span>Viktigt!</span>
</li>
))}
</ul>
</div>
);}


import React from 'react';
function MessageList(){
if(!messages||messages.length===0)
return <p>inga meddelande</p>
return(
<div>
<ul>
<li key={messages.timestamp}
<p>{messages}</p>
<small>{messages.timestamp}</small>
{messages.important && <span>Viktigt</span>
</li>
))}
</ul>
</div>
);}

Kontrollerad komponent

import React, {useState} from 'react';

function Form(){
const[namn, setNamn] = useState('');
const [email, setEmail] = useState('');

function handleSubmit(event){
event.preventDefualt();
console.log('Name:',namn, 'Email:',email);
}
return(
<form onSubmit={handleSubmit}>
<lable>
Name: 
<input type="text" value{namn} onChange={e=> setNamn(e.target.value)}/>
</lable>
<lable>
Email: 
<input type="email" value{email} onChange={e=> setEmail(e.target.value)}/>
</lable>
<button type="Submit">Submit</button>
</form>
);
}

import React,{useState} from 'react';
function Form(){
const [name, setName] = useState('');
const [email,setEmail] = useState('');
function handlesubmit(event){
event.preventDefualt();
console.log('Name:'name,'Email:',email)
}
return (
<form>
<label>
Name: 
<input type="text" value={name} onChange={e=>setName(e.target.value)} />
</label>
<label>
<input type="email" value{email} onChange={e=>setEmail(e.target.value)}/>
</label>
</form>
);}

import React,{useState} from 'react';
function Form(){
const[name,setName] = useState('');
const[email,setEmail]= useState('');
function handleSubmit(event){
event.preventDefualt();
console.log('Name:',name,'Email:',email);
}
return(
<form onSubmit={handleSubmit}>
<label>
<input type="text" value{name} onChange={e=>setName(e.target.value)}/>
<input type="email" value{email} onChange={e=>setEmail(e.target.value)}/>
</label>
</form>
);
}



import React,{useState} from'eact';
function Form(){
const [name,setName] = useState=('');
const [email,setEmail] = useState=('');
function handleSubmit(event){
event.preventDefualt();
console.log('Name:',name,'Email:',email);
}
return(
<form onSubmit={handleSubmit}>
<label>
<input type="text" value{name} onChange={e=>setName(e.target.value)}/>
<input type="email" value{email} onChange={e=>setEmail(e.target.value)}/>
</label>
</form>
);}

Okontrollerad komponent

import React,{useState} from 'react';
function SearchBar(){
const inputRef = useRef(null);
return(
<div>
<input ref={inputRef} placeholder="Search..."/>
<button onClick={()=>inputRef.current.focus()}>Focus Input</button>
</div>
);}

import React,{useState} from 'react';
function SearchBar(){
const inputRef = useRef(null);
return(
<div>
<input ref={inputRef} placeholder="Search..."/>
<button onClick={()=>inputRef.current.fucus()}>Focus Input</button>
</div>
);
}

import React,{useState} from 'react';
function SerachBar(){
const inputRef = useRef(null);
return(
<div>
<input ref={inputRef} placeholder="Search..." />
<button onClick={()=>inputreft.current.fucos()}>Focus Input</button>
</div>
);}