Node.js og frameworks

Computerspace · FGU · Programmering i JavaScript

🌍 Hvad er Node.js og JavaScript frameworks?

Node.js bringer JavaScript til serveren. Frameworks som React og Vue.js revolutionerede frontend-udvikling.

Node.js – JavaScript på serveren:

```bash

Opret et nyt Node.js projekt

npm init -y # Opret package.json

npm install express # Installer Express framework

node server.js # Kør serveren

```

Express.js – minimal web framework:

```javascript

const express = require('express');

const app = express();

app.use(express.json()); // Parse JSON body

// GET endpoint

app.get('/elever', (req, res) => {

const elever = [

{ id: 1, navn: "Anna", karakter: 12 },

{ id: 2, navn: "Bo", karakter: 7 }

];

res.json(elever);

});

// POST endpoint

app.post('/elever', (req, res) => {

const nyElev = req.body;

// Gem til database...

res.status(201).json({ ...nyElev, id: 3 });

});

// Start serveren

app.listen(3000, () => {

console.log('Server kører på http://localhost:3000');

});

```

React – komponent-baseret UI:

```jsx

// Funktionel komponent med hooks

import { useState } from 'react';

function Tæller() {

const [antal, setAntal] = useState(0); // State hook

return (

<div>

<p>Antal: {antal}</p>

<button onClick={() => setAntal(antal + 1)}>

Tæl op

</button>

</div>

);

}

export default Tæller;

```

NPM og package.json:

```bash

npm install react react-dom # Installer pakker

npm install --save-dev vite # Dev-dependency

npm run dev # Start dev server (fra package.json scripts)

```

Vite – moderne build tool:

```bash

npm create vite@latest mit-projekt -- --template react

cd mit-projekt && npm install && npm run dev

```

---

🎓 Læringsmål for Node.js og frameworks

Læringsmål

• Forstå hvad Node.js er og hvad det muliggør for JavaScript
• Oprette en simpel Express.js web server med GET og POST endpoints
• Kende React som det mest brugte frontend-framework og forstå komponent-modellen
• Bruge NPM til at administrere pakker og scripts
• Opsætte et moderne JavaScript-projekt med Vite

Sådan kan du arbejde med emnet

• Hvad er Node.js og hvad gør det muligt?
• Hvad er Express.js og hvad bruges det til?
• Hvad er React og hvad er en komponent?
• Hvad er NPM og hvad er package.json?

⚠️ Typiske fejl at undgå

• Committer node_modules til Git – tilføj node_modules/ til .gitignore
• Glemmer npm install efter at klone et projekt
• Blander CommonJS og ES modules – tjek om projektet bruger require() eller import

---

💡 Tips til at komme i gang

• Byg en simpel REST API med Express der gemmer data i et array (ingen database)
• Prøv create-react-app eller Vite til at starte et React-projekt
• Lær Vue.js som lettere alternativ til React – god dokumentation og lavere kompleksitet