Introduktion

  • 4 minuter

Om du vill skapa ett interaktivt program måste du kunna ändra data och svara på användarbegäranden. I React hanteras den här funktionen via tillstånd och händelser.

Tillstånd är data som kan uppdateras och delas mellan komponenter i hela programmet. Med händelser kan du hantera alla sätt som en användare kan interagera med ditt program på: klick, skrivningar och tryckningar.

Målsättningar

I den här modulen gör du följande:

  • Lägg till tillstånd i ett program.
  • Lägg till händelsehanterare.
  • Använd Effect Hook för att svara på tillståndsändringar.

Förutsättningar

  • Kunskaper om JavaScript, HTML och CSS
  • Grundläggande förståelse för React-komponenter
  • En kodredigerare, till exempel Visual Studio Code
  • Node.js installerat lokalt
  • Git installerat lokalt
  • Startprojektet som beskrivs i följande avsnitt

Klona projektet

Den här modulen använder ett startprojekt. Klona projektet och öppna det i Visual Studio Code.

  1. Kör följande steg i ett kommandofönster eller ett terminalfönster för att hämta startprojektet. Det här steget klonar lagringsplatsen och öppnar startmappen i Visual Studio Code.

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. I Visual Studio Code öppnar du den integrerade terminalen genom att välja Visa>Terminal. Eller välj Ctrl+'. (På en Mac väljer du Cmd+'.)

  3. I terminalen kör du följande kod för att installera nödvändiga paket och starta utvecklingsservern.

    npm install
npm start

  4. Standardwebbläsaren bör öppnas automatiskt. Om den inte gör det öppnar du webbläsaren och går till http://locahost:8080. Startsidan öppnas.