Hur man skapar interaktiva komponenter med React: State och Eventhantering

I React, en av de mest populära biblioteken för att bygga användargränssnitt, är komponenter funktionella byggblock. De omvandlar tillstånd (state) till användargränssnittselement som kan uppdateras dynamiskt. En viktig aspekt av React är dess hantering av händelser och state, som gör det möjligt att skapa interaktiva och responsiva applikationer. Denna process handlar om att hantera användarinmatning, vilket kan inkludera knapptryckningar, textinmatningar och andra interaktioner som leder till en förändring i UI.

En grundläggande komponent i React som hanterar händelser är en knapp som, när den klickas på, triggar en åtgärd. Ett enkelt exempel på detta skulle kunna vara en knapp som skriver ett meddelande i konsolen när den klickas. Här är ett exempel på en sådan komponent:

jsx
Copy code
const Button = () => {

  const handleClick = () => {
    console.log("click");
  };
  return (
    <button
      className="bg-white text-purple-800 hover:bg-gray-300 p-3 rounded-md"
      onClick={handleClick}
    >
      Button
    </button>
  );
};
export default Button;

I detta exempel definieras en knapp med en onClick-händelse, som lyssnar på användarens klick och anropar funktionen handleClick. Denna funktion kör sedan en mycket enkel logik, där den skriver ut ett meddelande till webbläsarens konsol. För att testa detta skulle man importera och använda knappen i en annan komponent, till exempel App.jsx. När användaren klickar på knappen kommer meddelandet "click" att dyka upp i konsolen.

För att skapa en mer interaktiv applikation, kan vi introducera en annan viktig aspekt av React — hantering av state. React tillhandahåller en funktion som kallas useState för att hålla reda på och uppdatera komponentens tillstånd. Tänk dig att du skapar en budget-applikation där användaren kan ange ett belopp, och applikationen visar vilka bilar som ryms inom den angivna budgeten.

Här är ett exempel på hur detta kan göras i App.jsx:

jsx
Copy code
import { useState } from "react";

import Card from "./components/Card";

import Button from "./components/Button";

export default function App() {
  const data = [
    { id: 1, name: "Fiat", year: 2023, model: "Panda", price: 12000 },

    { id: 2, name: "Peugeot", year: 2018, model: "308", price: 16000 },

    { id: 3, name: "Ford", year: 2022, model: "Mustang", price: 25000 },

    { id: 4, name: "Renault", year: 2019, model: "Clio", price: 18000 },

    { id: 5, name: "Citroen", year: 2021, model: "C3 Aircross", price: 22000 },

    { id: 6, name: "Toyota", year: 2020, model: "Yaris", price: 15000 },

    { id: 7, name: "Volkswagen", year: 2021, model: "Golf", price: 28000 },
    { id: 8, name: "BMW", year: 2022, model: "M3", price: 45000 },

    { id: 9, name: "Mercedes", year: 2021, model: "A-Class", price: 35000 },

    { id: 10, name: "Audi", year: 2022, model: "A6", price: 40000 },
  ];
  const [budget, setBudget] = useState(20000);
  return (
    <div>
      <h1>Your budget is {budget}</h1>
      <input
        type="number"
        step="1000"
        value={budget}
        onChange={(e) => setBudget(e.target.value)}
      />
      {data
        .filter((el) => el.price <= budget)
        .map((el) => (
          <Card key={el.id} car={el} />
        ))}
    </div>
  );
}

En viktig aspekt som härstammar från Reacts arbete med state är användningen av "syntetiska händelser". React kapslar in de vanliga DOM-händelserna (som click, change, submit) i ett så kallat syntetiskt händelseobjekt. Detta gör att React kan säkerställa en konsekvent beteende över olika webbläsare och plattformar. Till exempel, när en onChange-händelse utlöses, tas värdet från händelsens mål (e.target.value), vilket ger tillgång till den nya användarinmatningen och kan användas för att uppdatera appens state.

Det som är viktigt att förstå här är att Reacts komponenter är funktioner, och dessa funktioner ansvarar för att skapa och uppdatera det användargränssnittet baserat på state. State i React är därför inte bara en teknisk detalj, utan en central del av hur en applikation hanterar förändringar och interaktioner med användaren.

För att skapa interaktiva gränssnitt i React, är det avgörande att förstå hur man använder useState och andra hooks för att styra komponenternas tillstånd och svara på användarhändelser. I många fall räcker det att kombinera dessa två hooks, useState och useEffect, för att skapa dynamiska användarupplevelser som svarar på användarens handlingar och återspeglar förändringar i tillståndet utan att behöva skriva omfattande och komplex kod.

Medan det är grundläggande att behärska användningen av dessa hooks för att skapa funktionella React-applikationer, bör utvecklare också vara medvetna om att React fortsätter att utvecklas. Nya versioner och uppdateringar kan innebära att äldre funktioner gradvis blir föråldrade och ersätts med mer effektiva lösningar. För att hålla applikationerna uppdaterade och bibehålla kompatibilitet, är det viktigt att följa dokumentation och följa med i förändringarna inom React-ramverket.

Hur fungerar autentisering och auktorisation i moderna webbapplikationer?

I dagens webbapplikationer är autentisering och auktorisation centrala komponenter som säkerställer att användare kan få tillgång till systemet på ett säkert sätt och att deras rättigheter hanteras korrekt. Dessa begrepp är emellertid inte bara teoretiska utan också praktiska och komplexa. Autentisering handlar om att bekräfta att en användare är den de påstår sig vara, medan auktorisation bestämmer vad användaren får och inte får göra när de är autentiserade. I denna text utforskar vi hur dessa processer fungerar, särskilt i kontexten av en typisk modern webbapplikation som använder React och FastAPI.

I ett typiskt flöde när en användare loggar in med sitt konto, till exempel genom att ange e-postadress och lösenord, skapas en JWT som innehåller information om användaren, såsom användar-ID och sessionens giltighetstid. Denna token skickas sedan till frontend-applikationen, där den kan användas för att autentisera användaren vid varje interaktion med backend-servern. En stor fördel med JWT är att den är stateless, vilket innebär att varje begäran som innehåller en giltig JWT är fullständig i sig själv utan att backend behöver komma ihåg någon session.

När det gäller autentisering i en React-applikation gör React Router det möjligt att dynamiskt ladda olika komponenter baserat på användarens navigering. Genom att använda React Router kan applikationen visa eller dölja sidor beroende på om användaren är inloggad eller inte. För att säkerställa att en användare inte kan komma åt skyddade rutter utan korrekt autentisering, kan React Router kombineras med en autentiseringsteknik som JWT. Detta gör det möjligt att kontrollera åtkomsten till olika delar av applikationen genom att skicka JWT-token med varje begäran.

Auktorisationen, å andra sidan, handlar om att avgöra vad användaren faktiskt får göra när de väl är autentiserade. Här kan roller och rättigheter definieras, så att vissa användare har tillgång till administratörsfunktioner medan andra endast kan läsa innehåll. I en REST API kan auktorisation hanteras på servern där varje begäran som kommer in med en JWT först valideras och sedan kontrolleras mot användarens roll innan servern tillåter eller nekar åtkomst till specifika resurser.

Ett vanligt exempel är när en användare vill uppdatera sina uppgifter. Om användaren inte har de rätta rättigheterna, till exempel om de inte är administratör, ska deras begäran blockeras. För att uppnå detta kan information om användarens roll och behörigheter sparas i JWT:n eller hållas på servern och användas för att kontrollera åtkomst i samband med varje operation.

För att integrera JWT-baserad autentisering i en React-applikation krävs förståelse för hur Reacts hooks och context-system fungerar. Med dessa verktyg kan applikationen hantera tillståndet för autentisering på ett effektivt sätt, vilket gör att komponenter kan reagera dynamiskt på användarens inloggningsstatus. Genom att kombinera dessa tekniker kan utvecklare skapa kraftfulla, responsiva gränssnitt som reagerar på förändringar i användarens autentiseringstillstånd utan att göra onödiga serveranrop.

För att säkerställa en hög säkerhetsnivå i en sådan applikation, måste både frontend och backend samarbeta och verifiera autentiseringens giltighet vid varje steg. Detta betyder att användardata måste skyddas genom kryptering både vid lagring och överföring, och att alla delar av applikationen som hanterar autentisering och auktorisation måste testas noggrant för att undvika sårbarheter.

Hur autentisering och användarhantering fungerar i en React-applikation

I en React-applikation kan hantering av användarautentisering och auktorisering vara en av de mest grundläggande och samtidigt komplexa uppgifterna. För att implementera en enkel men funktionell autentisering krävs flera komponenter och en väl definierad kontext för att effektivt hantera användardata och säkerställande av rättigheter. I den här genomgången går vi igenom hur man implementerar en grundläggande autentisering med hjälp av React och FastAPI, och hur man lagrar autentiseringstoken för att upprätthålla sessioner över tid.

Först, skapa en inloggningskomponent där användare kan ange sitt användarnamn och lösenord. Denna komponent använder useState för att hålla reda på användarnamn och lösenord, och den gör en anrop till en autentiseringstjänst när formuläret skickas. Vid lyckad inloggning ställs användarnamnet och lösenordet tillbaka till tomma strängar och användaren loggas in genom att anropa en funktion från AuthContext. Denna komponent är enkel, men den är grunden för användarens interaktion med applikationen.

jsx
Copy code
import { useState } from 'react';
import { useAuth } from './AuthContext';
const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const { login } = useAuth();
    const handleSubmit = (e) => {
        e.preventDefault();
        login(username, password);
        setUsername('');
        setPassword('');
    };
    return (

        <form onSubmit={handleSubmit}>

            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            <button type="submit">Login</button>
        </form>
    );
};
export default Login;

jsx
Copy code
import { useAuth } from './AuthContext';
const Message = () => {
    const { message } = useAuth();

    return <div>{message}</div>;

};
export default Message;

Nästa steg är att skapa en komponent för att visa användarlistor. För detta krävs att användaren är autentiserad, och därmed används en JSON Web Token (JWT) som en form av säker autentisering. I Users-komponenten hämtas denna token från AuthContext, och om den är giltig görs ett API-anrop för att få användardata. Om användaren inte är inloggad visas ett meddelande om att logga in.

jsx
Copy code
import { useEffect, useState } from 'react';

import { useAuth } from './AuthContext';
const Users = () => {
    const { jwt, logout } = useAuth();
    const [users, setUsers] = useState(null);
    useEffect(() => {
        const fetchUsers = async () => {

            const response = await fetch('http://127.0.0.1:8000/users/list', {

                headers: { Authorization: `Bearer ${jwt}` },
            });
            const data = await response.json();
            setUsers(data.users);
        };
        if (jwt) {
            fetchUsers();
        }
    }, [jwt]);
    if (!jwt) return <div>Please log in to see all the users</div>;
    return (
        <div>
            {users ? (
                <div>
                    <h2>The list of users</h2>
                    <ul>
                        {users.map((user) => (

                            <li key={user.username}>{user.username}</li>

                        ))}
                    </ul>
                    <button onClick={logout}>Logout</button>
                </div>
            ) : (
                <div>Loading...</div>
            )}
        </div>
    );
};
export default Users;

För att binda samman alla komponenter använder vi en övergripande App-komponent, som styr vilken vy som ska visas—registreringsformulär eller inloggningsformulär. Denna komponent hanterar också visningen av användarlistan och autentiseringsstatus.

jsx
Copy code
import { useState } from 'react';

import { AuthProvider } from './AuthContext';
import Register from './Register';
import Login from './Login';
import Users from './Users';
import Message from './Message';
const App = () => {
    const [showLogin, setShowLogin] = useState(true);
    return (
        <AuthProvider>
            <div>
                <h1>Simple Auth App</h1>
                {showLogin ? <Login /> : <Register />}
                <button onClick={() => setShowLogin(!showLogin)}>
                    {showLogin ? 'Register' : 'Login'}
                </button>
                <Message />
                <Users />
            </div>
        </AuthProvider>
    );
};
export default App;

Den sista delen av autentisering handlar om att bevara användarens session även när webbläsaren stängs eller uppdateras. För detta används localStorage eller sessionStorage. localStorage erbjuder en praktisk lösning för att lagra användartokens, eftersom den har en större lagringskapacitet än cookies och skickas inte med varje HTTP-begäran. Genom att använda localStorage.setItem() och localStorage.getItem() kan du lagra och hämta användarens JWT, och därmed hålla användaren inloggad även efter att sidan har laddats om.

javascript
Copy code
export const AuthProvider = ({ children }) => {

    const [user, setUser] = useState(null);
    const [jwt, setJwt] = useState(null);
    const [message, setMessage] = useState(null);
    useEffect(() => {
        const storedJwt = localStorage.getItem('jwt');
        if (storedJwt) {
            setJwt(storedJwt);
            fetch('http://127.0.0.1:8000/users/me', {
                headers: { Authorization: `Bearer ${storedJwt}` },
            })
                .then(res => res.json())
                .then(data => {
                    if (data.username) {
                        setUser({ username: data.username });
                        setMessage(`Welcome back, ${data.username}!`);
                    }
                });
        }
    }, []);
    return (
        <AuthContext.Provider value={{ user, jwt, message }}>
            {children}
        </AuthContext.Provider>
    );
};

För att sammanfatta, autentisering och hantering av användardata i en React-applikation kräver ett antal komponenter som arbetar tillsammans. Genom att använda useState och useEffect för att hantera tillstånd och göra API-anrop samt localStorage för att bevara autentiseringstoken över sessioner, skapar vi en applikation som inte bara är funktionell utan också användarvänlig och säker.

Hur man bygger en FastAPI-applikation och kopplar den till MongoDB

Först och främst måste vi definiera de modeller som kommer att användas i applikationen. Här börjar vi med att skapa två bilmodeller som representerar en enkel bilsamling. Detta görs genom att definiera en CarModel och en CarCollection i Python. CarModel definierar varje bil med sina attribut, såsom märke, modell, år, motorstorlek, körsträcka och pris. Därefter skapar vi en CarCollection som håller en lista på dessa bilmodeller.

När modellerna är på plats kan du skapa ett test där du instansierar två bilar och adderar dem till en bilsamling. Med hjälp av Pydantic-modellen kan du sedan skriva ut denna samling i ett format som är lämpligt för vidare användning i en API.

Efter att ha definierat datamodellerna är nästa steg att skapa grundstrukturen för vår FastAPI-applikation. FastAPI är ett modernt webbramverk för att bygga API:er som är både snabbare och mer effektivt än många andra alternativ. För att starta applikationen på rätt sätt använder vi ett verktyg som kallas "scaffolding", vilket innebär att vi bygger upp en grundläggande struktur utan funktionalitet för att sedan gradvis lägga till fler funktioner.

En viktig aspekt av detta är att hålla hemliga uppgifter, såsom anslutningssträngar till databaser, utanför versioneringssystemet. För att göra detta skapar vi en .env-fil där vi lagrar alla känsliga uppgifter som används i applikationen. Denna fil innehåller bland annat URL:en till vår MongoDB Atlas-databas och namnet på databasen. För att säkerställa att denna fil inte spåras av git, lägger vi också till den i .gitignore.

När vi har definierat vår miljökonfiguration är nästa steg att ansluta applikationen till vår MongoDB-databas. Här använder vi FastAPIs "lifespan"-evenemang för att köra specifika uppgifter vid uppstart och nedstängning av applikationen. Detta innebär att vi, innan applikationen börjar ta emot förfrågningar, kan etablera en anslutning till vår MongoDB-databas. För att säkerställa att anslutningen fungerar som den ska kan vi skicka en enkel "ping"-förfrågan till MongoDB och bekräfta att vi är korrekt anslutna.

När applikationen startar kommer den att logga meddelanden som bekräftar att anslutningen till databasen har lyckats, och den kommer att vara redo att börja ta emot och hantera API-förfrågningar. För att fullfölja grundläggande funktionalitet skapar vi en rotväg (/) som returnerar ett enkelt JSON-svar, vilket indikerar att applikationen fungerar som den ska.

För att göra applikationen mer robust och användbar i framtiden finns det flera viktiga aspekter att tänka på. För det första bör man alltid ha en tydlig struktur för hur man hanterar API-förfrågningar och hur man svarar på dessa. När applikationen växer, kan det vara nödvändigt att lägga till autentisering och behörighetskontroller för att skydda känsliga data. Det är också viktigt att tänka på hur man hanterar fel och undantag för att ge användaren meningsfulla felmeddelanden. När applikationen utvecklas vidare kan det också vara värt att implementera loggning för att övervaka och felsöka problem i realtid.

Endtext

Hur man implementerar laddning och validering av data i React-applikationer

Vid skapandet av en webbapplikation med React är en av de grundläggande funktionerna hur man laddar och hanterar data på ett effektivt sätt. En av de centrala metoderna för detta är användningen av "loaders", som är funktioner som tillhandahåller data till komponenter innan de renderas på sidan. En loader hämtar vanligtvis data från en server och skickar den till den komponent som behöver den, vilket gör det möjligt att förbereda och visa data innan användaren interagerar med sidan.

När vi arbetar med en React-applikation, som här demonstreras med en bilapplikation, är processen att använda en loader för att förse komponenter med data ett effektivt sätt att bygga skalbara applikationer. I exemplet importeras useLoaderData från React Router och används för att hämta data i komponenten "Cars". Denna funktion ger direkt tillgång till de data som definieras i en loaderfunktion. Här är en översikt över hur en sådan funktion kan implementeras:

javascript
Copy code
import { useLoaderData } from "react-router-dom";

import CarCard from "../components/CarCard";

const Cars = () => {
  const cars = useLoaderData();
  return (
    <div>
      {cars.map(car => (
        <CarCard key={car.id} car={car} />
      ))}
    </div>
  );
};
export default Cars;

För att dessa data ska kunna laddas, definieras en loaderfunktion som gör en HTTP-förfrågan till en API-server, hämtar JSON-data och returnerar den relevanta informationen. I vårt exempel ser den ut så här:

javascript
Copy code
export const carsLoader = async () => {

  const res = await fetch(`${import.meta.env.VITE_API_URL}/cars?limit=30`);
  const response = await res.json();
  if (!res.ok) {

    throw new Error(response.message);

  }
  return response['cars'];
};

För att länka ihop komponenten och loadern, används loader-attributet i ruttkonfigurationen i App.jsx:

javascript
Copy code
import Cars, { carsLoader } from "./pages/Cars";
<Route path="/cars" element={<Cars />} loader={carsLoader} />

Med den här implementeringen kommer /cars-sidan att visa en lista med bilar från servern. Detta är en grundläggande metod för att ladda och visa data på en React-sida innan den renderas, vilket förbättrar prestanda och användarupplevelse.

Vidare, när vi hanterar formulärdata i React-applikationer, kan det vara användbart att använda externa bibliotek för att underlätta detta. Ett populärt bibliotek är React Hook Form (RHF), som erbjuder en effektiv metod för att skapa och hantera formulär i React. RHF integreras enkelt med Zod, ett schema-baserat valideringsbibliotek för JavaScript och TypeScript, vilket gör det lätt att validera användardata innan den skickas till servern.

Med Zod kan du definiera komplexa valideringsregler för fält som användarnamn och lösenord. Exempelvis kan du sätta upp regler för att användarnamn måste vara mellan 4 och 10 tecken långa, och att lösenordet inte får vara kortare än 4 eller längre än 10 tecken:

javascript
Copy code
import { z } from 'zod';

const schema = z.object({
  username: z.string().min(4, 'Användarnamnet måste vara minst 4 tecken långt').max(10, 'Användarnamnet får inte vara längre än 10 tecken'),
  password: z.string().min(4, 'Lösenordet måste vara minst 4 tecken långt').max(10, 'Lösenordet får inte vara längre än 10 tecken'),
});

När ett formulär skickas kan den validerade datan bearbetas och skickas vidare. Här är ett exempel på hur detta kan implementeras i en komponent:

javascript
Copy code
import { useForm } from "react-hook-form";
import { zodResolver } from '@hookform/resolvers/zod';
const LoginForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });
  const onSubmitForm = (data) => {
    console.log(data);
  };
  return (

    <form onSubmit={handleSubmit(onSubmitForm)}>

      <input {...register('username')} />
      {errors.username && <span>{errors.username.message}</span>}
      <input {...register('password')} />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">Logga in</button>
    </form>
  );
};

För att sammanfatta, genom att använda loaders och valideringstekniker som Zod i React kan du skapa välstrukturerade och skalbara applikationer där data hanteras effektivt, och användarinteraktioner som formulär kan kontrolleras och valideras på ett enkelt sätt. Detta är en viktig del av utvecklingen för att skapa stabila och användarvänliga webbapplikationer.