Kom igång med React på nolltid – allt du behöver veta för att skapa din första app

av

Introduktion till React

React är ett populärt JavaScript-bibliotek för att bygga användargränssnitt och webbapplikationer. Det släpptes ursprungligen 2013 av Facebook och används nu av många stora företag för att bygga skalbara och interaktiva webbapplikationer.

Vad är React?

React är ett bibliotek för att skapa componentbaserade användargränssnitt. Med React delar du upp ditt gränssnitt i återanvändbara komponenter, som var och en hanterar sin egen state och rendering. När datan uppdateras renderas endast de komponenter om behöver uppdateras, vilket gör att applikationen blir snabb och responsiv.

Varför använda React?

Några fördelar med React:

  • Återanvändbara komponenter gör koden enklare att underhålla
  • Virtuell DOM gör renderingen snabb och effektiv
  • Enkel dataflöde med state och props
  • Stort ekosystem med många bibliotek och ramverk
  • Används av stora företag som Facebook, Netflix, Airbnb m.fl.

React vs andra ramverk

React skiljer sig från traditionella ramverk som Angular och Vue genom att endast fokusera på vyer och inte innehålla routing, backend-integration mm. Det gör React väldigt flexibelt att kombinera med andra bibliotek. React använder också virtuell DOM för effektiv rendering till skillnad från Angular och Vue som använder traditionell DOM-manipulering.

Installera React

För att komma igång med React behöver du installera Node.js och npm. Npm används för att hantera beroenden och versionshantering i ditt projekt.

Gå till nodejs.org och ladda ner den senaste versionen av Node.js för ditt operativsystem. Detta kommer att installera både Node.js och npm.

När installationen är klar, öppna terminalen och kontrollera att Node.js är installerat:

node -v

Detta ska visa Node.js versionen som är installerad.

Sedan behöver du installera create-react-app globalt med npm:

npm install -g create-react-app

Create-react-app är ett verktyg som snabbt genererar ett grundläggande React projekt så att du kan komma igång med kodandet.

För att skapa ett nytt React projekt navigera till önskad mapp i terminalen och kör:

create-react-app mitt-app

Detta kommer skapa en mapp mitt-app med alla filer du behöver för ett grundläggande React projekt.

Gå in i mappen:

cd mitt-app

och starta utvecklingsservern:

npm start

Detta startar projektet på http://localhost:3000 där du kan se appen live uppdateras allteftersom du gör ändringar.

Nu är allt klart för att börja koda i React!

React komponenter

React-appar är uppbyggda av komponenter. Komponenter låter dig dela upp gränssnittet i oberoende, återanvändbara delar och hantera varje del separat.

Det finns två sätt att definiera en komponent i React:

Funktionella komponenter

Funktionella komponenter är vanliga JavaScript-funktioner som tar props som argument och returnerar React-element.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>; 
}

Funktionella komponenter är enklare att skriva än klasskomponenter.

Klasskomponenter

Klasskomponenter är ES6-klasser som extendar React.Component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Klasskomponenter har tillgång till state och livscykelmetoder.

De flesta komponenter kan skrivas som funktionella komponenter. Klasskomponenter behövs bara om du behöver state eller lifecycle-metoder.

JSX

JSX är ett tillägg till JavaScript som låter dig skriva ut formatterad text direkt i komponenter. Det liknar HTML men har några viktiga skillnader:

  • JSX använder className istället för class för att undvika konflikter med JavaScript klass-syntaxen.
  • Stilregler skrivs in som JavaScript-objekt istället för strängar.
  • Du kan infoga uttryck direkt i JSX genom att omsluta dem i krullparenteser. T.ex. {2 + 2} kommer att utvärderas till 4.
  • JSX måste kompileras till vanlig JavaScript innan det kan köras i webbläsaren.

Fördelarna med JSX är att det gör det enkelt att blanda markup och logik i samma fil. Komponenter blir självbeskrivande och lättare att underhålla när HTML och kod som påverkar HTML finns på samma ställe.

Genom att använda JSX kan du bygga egna komponenter som fungerar precis som inbyggda HTML-element. React hanterar resten bakom kulisserna.

State och props

State och props är två viktiga koncept i React som används för att hantera data i komponenter.

State är data som är privat och hanteras internt i en komponent. State kan uppdateras och när staten uppdateras renderas komponenten om. State ska bara användas för data som behöver kunna ändras och påverka komponentens rendering.

Props är data som skickas in till en komponent som properties. Props sätts när komponenten skapas och är immutable (kan inte ändras). Props används för att skicka data till komponenter.

Skillnaden är alltså att state är internt och kan ändras medan props sätts externt när komponenten skapas.

State bör användas för:

  • Data som behöver kunna uppdateras och som påverkar renderingen
  • Internt data som bara komponenten själv behöver hantera

Props bör användas för:

  • Skicka data till komponenter
  • Data som sätts när komponenten skapas och inte behöver ändras

Ett exempel är en komponent för en klocka. Tiden som visas behöver kunnas ändras så den bör lagras i state. En prop kan vara att skicka in tidzonen klockan ska visa tiden för.

Hantera händelser

I React använder vi händelsehanterare för att lyssna efter olika typer av händelser och utföra någon handling när de inträffar. Det finns flera sätt att binda händelsehanterare i React:

Binda händelsehanterare

Den vanligaste metoden är att skicka en funktion som händelsehanterare till ett JSX-attribut. Exempelvis för att lyssna efter klick-händelser:

function MyComponent() {
  function handleClick() {
    // Gör något vid klick
  }

  return <button onClick={handleClick}>Klicka här</button> 
}

Här skickar vi in handleClick som händelsehanterare till onClick. När användaren klickar på knappen kommer handleClick att anropas.

Skicka argument till händelsehanterare

Vi kan skicka argument till händelsehanterare genom att wrappa dem i en anonym funktion:

function MyComponent() {
  function handleClick(name) {
    alert(`Hej ${name}!`) 
  }

  return <button onClick={() => handleClick('Anna')}>Klicka här</button>
}

Här skapar vi en anonym funktion som anropar handleClick och skickar med 'Anna' som argument. På så sätt kan vi skicka vidare parametrar till händelsehanteraren.

Detta är de grundläggande koncepten för att hantera händelser i React. Genom att binda händelsehanterare och skicka argument kan vi bygga interaktiva komponenter.

Villkorlig rendering

React gör det enkelt att rendera olika komponenter beroende på state med hjälp av villkorliga uttryck i JSX. Detta kallas för villkorlig rendering.

Genom att använda JavaScript-operatorer som if eller den ternära operatorn ? : direkt i JSX, kan du rendera olika UI beroende på värden i state eller props.

function MyComponent() {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      {loggedIn ? (
        <WelcomeMessage />
      ) : (
        <LoginForm />
      )}
    </div>
  );
}

I exemplet ovan renderas komponenten <WelcomeMessage /> om loggedIn är satt till true, annars renderas <LoginForm />.

Villkorlig rendering är inte begränsad till att bara visa eller dölja element. Du kan rendera olika komponenter, text, listor eller allt annat beroende på villkor.

Du kan ha godtyckligt många villkor i din villkorliga rendering. Det gör att du kan rendera olika UI beroende på många olika tillstånd i din app:

function MyComponent() {
  const [userId, setUserId] = useState(null);

  return (
    <div>
      {userId === 1 && <AdminTools />}
      {userId === 2 && <ModeratorTools />}
      {userId === null && <LoginForm />}
    </div>
  );
}

Genom villkorlig rendering kan du bygga dynamiska och interaktiva UIs som uppdateras baserat på användarinteraktion och ändringar i state. Det gör React till ett kraftfullt ramverk för att bygga komplexa appar med rika användargränssnitt.

Listor och nycklar

Ofta behöver man rendera listor av objekt i React. Ett vanligt exempel är att hämta data från en API och visa det i appen.

För att rendera listor på ett bra sätt i React bör man använda nycklar. Nycklar hjälper React att identifiera vilka objekt som lagts till, ändrats eller tagits bort.

Här är ett exempel på hur man renderar en lista av objekt med hjälp av .map() och nycklar:

const listItems = [
  { id: 1, name: 'Anna' },
  { id: 2, name: 'Erik' },
  { id: 3, name: 'Lisa' }
];

const List = () => {
  return (
    <ul>
      {listItems.map(item => {
        return (
          <li key={item.id}>
            {item.name}  
          </li>
        );
      })}
    </ul>
  );
}

Genom att ange key={item.id} på det outersta HTML-elementet så kan React hålla reda på vilka objekt som är vilka. Nyckeln (key) behöver bara vara unik bland syskonen, inte globalt.

Om man inte anger en nyckel när man loopar så får man en varning i console och prestandan kan bli sämre. Så det är viktigt att komma ihåg nycklar när man loopar i React!

Lyfta upp state

Att lyfta upp state innebär att flytta state från en child-komponent till en parent-komponent. Detta gör att flera komponenter kan få tillgång till samma data.

Fördelar med att lyfta upp state

  • Gir en ”single source of truth” för data som används i flera komponenter
  • Lättare att hantera relaterad data som påverkar flera komponenter
  • Minskar duplikering av state
  • Underlättar dataflödet mellan komponenter

Exempel på att lyfta upp state

Ett vanligt exempel är att lyfta upp state för ett formulär. Istället för att hantera varje input i formuläret lokalt, kan staten för hela formuläret lyftas upp till en parent-komponent.

// App.js

const App = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '' 
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  }

  return (
    <Form formData={formData} handleChange={handleChange} />
  )
}

// Form.js

const Form = ({ formData, handleChange }) => {
  return (
    <>
      <input 
        name="name" 
        value={formData.name}
        onChange={handleChange} 
      />

      <input
        name="email"
        value={formData.email} 
        onChange={handleChange}
      />
    </>
  )
}

Genom att lyfta upp staten till App-komponenten kan båda input-fälten enkelt uppdateras via handleChange-funktionen.

Nästa steg

Efter att du har lärt dig grunderna i React är det dags att ta nästa steg och fördjupa dina kunskaper. Här är några tips på vad du kan lära dig härnäst:

Routing

De flesta React-applikationer har flera olika sidor och behöver någon form av routing för att hantera navigation mellan sidorna. React Router är det populäraste biblioteket för routing i React. Genom att lära dig React Router kan du bygga en SPA (single page application) med flera olika routes.

Global state

I små applikationer kan du komma långt med komponentstate och props. Men i större applikationer behöver du ofta någon form av global state som är tillgänglig i hela appen. Redux och MobX är två populära state management-bibliotek för React.

Testing

För att säkerställa kodkvalitet och undvika buggar är det viktigt att testa din React-kod. Jest är det mest populära testramverket för React. Genom att lära dig Jest kan du skriva enhetstester, integrationstester och UI-tester för din app.

Prestandaoptimering

I större React-appar behöver du tänka på prestandaoptimering för att appen ska förbli snabb och responsiv. Tekniker som memoization, lazy loading och code splitting är viktiga att lära sig.

Typsäkerhet

JavaScript är ett typlat språk men i React-projekt kan det vara bra att lägga till typsäkerhet. Med TypeScript eller Flow kan du skapa typsäkra React-komponenter.

Genom att ta dig an dessa områden efter att du har lärt dig React grunderna kommer du snabbt bli en mer erfaren React-utvecklare!

Lämna en kommentar