Kom igång + useState

Sätta upp projekt med Vite

• Create React App är deprecated sedan början av 2023
• Vi använder Vite istället:

npm create vite@latest
cd <project-name>
npm i

Starta projektet

npm run dev

Lägg till routing

• https://reactrouter.com/en/main/start/tutorial

useState

• En hook som används för att hantera tillstånd i React
• Används för att hantera enkla tillstånd

Exempel:

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

Komplexa state

//Lista med personer
const [persons, setPersons] = useState([
  { id: 1, name: 'Kalle' },
  { id: 2, name: 'Pelle' },
  { id: 3, name: 'Nisse' },
]);

Uppdatera komplext state

const addPerson = () => {
  setPersons([
    ...persons,
    { id: 4, name: 'Olle' },
  ]);
};

Statet får inte muteras

const addPerson = () => {
  persons.push({ id: 4, name: 'Olle' });
  setPersons(persons);
};

Demo - todo app