27. Moduły JavaScript — import/export, ESM vs CommonJS

Moduły — organizacja kodu JavaScript

Moduły JavaScript (ESM — ECMAScript Modules) pozwalają dzielić kod na pliki z jawnym eksportowaniem i importowaniem. Zastąpiły starszy format CommonJS (require/module.exports) w Node.js. Każdy plik React jest modułem ESM.

Każdy plik .js i .jsx w projekcie React jest modułem. import React from 'react', import { useState } from 'react', export default function App() — to moduły. Zrozumienie named vs default export eliminuje wiele błędów importu.

1. Wyjaśnić czym są moduły i dlaczego były potrzebne
2. Opisać named export i default export — różnice
3. Omówić różnice ESM vs CommonJS
4. Pokazać dynamic import() dla lazy loading

1. Named export — export const fn, import { fn } from './module'
2. Default export — export default Component, import Component from './Component'
3. Re-export — export { fn } from './utils', barrel files
4. ESM vs CommonJS — różnice syntaktyczne i semantyczne
5. Dynamic import() — lazy loading, code splitting

• Struktura minimalna

1. Wstęp — historia: IIFE → CommonJS → ESM
2. Rozdział 1: Named i default export/import
3. Rozdział 2: ESM vs CommonJS
4. Rozdział 3: Dynamic import i praktyki
5. Podsumowanie
6. Bibliografia

Moduły organizują każdy projekt React!

Pokaż strukturę plików projektu React i omów jak import/export łączy wszystkie pliki. Diagram zależności modułów jest świetnym elementem graficznym.