React Introduktionsguide: Bygg ditt första användargränssnitt från grunden

React är ett JavaScript-bibliotek för att bygga användargränssnitt. Det är utvecklat och underhållet av Facebook och har blivit ett av de mest populära verktygen inom frontend-utveckling. Den här guiden tar dig från grunden, steg för steg, för att förstå de grundläggande koncepten i React och bygga ett enkelt användargränssnitt.

Varför välja React?

React har följande fördelar:

• Komponentbaserat: React delar upp användargränssnittet i oberoende, återanvändbara komponenter. Detta gör koden lättare att underhålla och förstå.
• Deklarativt: React använder en deklarativ programmeringsstil, vilket innebär att du bara behöver beskriva vad du vill presentera, och React hanterar automatiskt uppdateringar och rendering.
• Effektivt: React använder en virtuell DOM och en smart diff-algoritm, vilket gör det möjligt att effektivt uppdatera användargränssnittet och minska onödig rendering.
• Stort community-stöd: React har ett stort community och ett rikt ekosystem, du kan hitta massor av handledningar, bibliotek och verktyg som hjälper dig att utveckla.
• Korsplattformskapacitet: React Native låter dig använda React för att utveckla native mobilapplikationer (iOS och Android).

Förberedelser

Innan du börjar måste du se till att du har följande verktyg installerade på din dator:

• Node.js: Node.js är en JavaScript-körningsmiljö som används för att köra React-utvecklingsverktyg. Du kan ladda ner och installera det från https://nodejs.org/.
• npm eller yarn: npm (Node Package Manager) och yarn är JavaScript-pakethanterare som används för att installera och hantera Reacts beroenden. Vanligtvis installeras npm tillsammans med Node.js. yarn kan installeras från https://yarnpkg.com/.

Skapa din första React-applikation

Vi kommer att använda create-react-app för att snabbt skapa ett React-projekt.

1. Skapa med npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Skapa med yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Efter att ha kört ovanstående kommandon kommer create-react-app automatiskt att skapa en katalog med namnet my-first-react-app och initiera ett React-projekt i den katalogen. Kommandot npm start eller yarn start startar utvecklingsservern, och du kan besöka http://localhost:3000 i din webbläsare för att se din React-applikation.

Katalogstruktur

Projektkatalogstrukturen som skapats av create-react-app är som följer:

my-first-react-app/
├── node_modules/         # Bibliotek som projektet är beroende av
├── public/               # Statiska resurser (t.ex. HTML-filer)
│   ├── index.html        # Applikationens huvudsakliga HTML-fil
│   └── ...
├── src/                  # React-källkod
│   ├── App.css           # CSS-stil för App-komponenten
│   ├── App.js            # App-komponenten
│   ├── App.test.js       # Testfil för App-komponenten
│   ├── index.css         # Global CSS-stil
│   ├── index.js          # Applikationens huvudsakliga JavaScript-fil
│   ├── logo.svg          # React-logotyp
│   └── ...
├── .gitignore            # Git-ignoreringsfil
├── package.json          # Projektets metadata och beroenden
├── README.md             # Projektets dokumentation
└── yarn.lock             # Fil som låser beroendeversioner (om yarn används)

Förstå React-komponenter

React-applikationer är uppbyggda av komponenter. Komponenter är oberoende, återanvändbara kodblock som används för att rendera specifika delar av användargränssnittet.

I filen src/App.js kan du se en standard App-komponent:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Kodförklaring:

• import React from 'react'; Importerar React-biblioteket.
• function App() { ... } Definierar en funktionskomponent med namnet App.
• return ( ... ) Returnerar ett JSX-uttryck som beskriver vad komponenten ska rendera.
• export default App; Exporterar App-komponenten så att den kan användas i andra filer.

JSX (JavaScript XML)

JSX är en JavaScript-syntaxförlängning som låter dig skriva HTML-liknande kod i JavaScript-koden. I exemplet ovan är ... ett JSX-uttryck. JSX-koden konverteras av Babel till standard JavaScript-kod så att webbläsaren kan förstå den.

Ändra App-komponenten

Låt oss ändra App-komponenten för att skapa en enkel räknare.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Räknare

      Aktuell räkning: {count}

      +
      -
    
  );
}

export default App;

Ändringsförklaring:

• import React, { useState } from 'react'; Importera useState Hook. useState är en React Hook som används för att lägga till tillstånd i funktionskomponenter.
• const [count, setCount] = useState(0); Använd useState Hook för att skapa en tillståndsvariabel med namnet count och initiera den till 0. setCount är en funktion för att uppdatera count-tillståndet.
• const increment = () => { setCount(count + 1); }; Definiera en funktion med namnet increment som används för att öka count-tillståndet med 1.
• const decrement = () => { setCount(count - 1); }; Definiera en funktion med namnet decrement som används för att minska count-tillståndet med 1.
• Aktuell räkning: {count} Visa värdet för count-tillståndet på sidan. {count} är ett JSX-uttryck som används för att infoga JavaScript-variabler i JSX-kod.
• + och - Skapa två knappar som binder increment och decrement-funktionerna. onClick är en händelsehanterare som används för att köra den angivna funktionen när knappen klickas.

När du har sparat filen src/App.js uppdateras webbläsaren automatiskt och du kommer att se en enkel räknare. Genom att klicka på knappen "+" ökas räkningen och genom att klicka på knappen "-" minskas räkningen.

Använda CSS-stilar

Du kan använda CSS för att försköna din React-applikation. create-react-app stöder CSS Modules och vanliga CSS-filer.

Använda CSS Modules:

CSS Modules låter dig skapa oberoende CSS-stilar för varje komponent, vilket undviker stilkonflikter. För att använda CSS Modules i en komponent måste du skapa en fil som slutar med .module.css.

Skapa till exempel en fil med namnet App.module.css och lägg till följande CSS-stilar i den:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Importera sedan CSS Modules i filen src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importera CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Använd styles-objektet för att referera till CSS-klasser */}
      

# Räknare

      Aktuell räkning: {count}

      +
      -
    
  );
}

export default App;

Använda vanliga CSS-filer:

Du kan också använda vanliga CSS-filer för att definiera globala stilar. I filen src/index.css kan du definiera globala stilar.

Till exempel, lägg till följande CSS-stil:

body {
  font-family: sans-serif;
}

Denna stil kommer att tillämpas på hela applikationens body-element.

Nästa steg

Grattis, du har slutfört din första React-applikation! Därefter kan du lära dig mer om React, till exempel:

• Kommunikation mellan komponenter: Lär dig hur olika komponenter kan kommunicera med varandra.
• Formulärhantering: Lär dig hur du skapar och hanterar formulär.
• Routing: Lär dig hur du använder React Router för att skapa applikationer med flera sidor.
• Redux eller Context API: Lär dig hur du hanterar applikationens tillstånd.
• Hooks: Fördjupa dig i React Hooks, till exempel useEffect, useContext etc.

Kom ihåg att React är en teknik som kräver kontinuerlig övning och inlärning. Lycka till med dina studier!