Bundlery, runtime a JSX
Co jsou bundlery?
Bundler je nástroj, který:
- Kombinuje více souborů do jednoho (umožní rozdělení kódu na menší části v různých souborech, které pak spojí do funkční aplikace)
- Zpracovává importy a závislosti (klíčová slova
importaexport) - Optimalizuje kód pro produkční verzi aplikace (build)
- Může transformovat moderní funkce JavaScriptu do kompatibilní verze pro starší prohlížeče (tzv. lowering)
Populární bundlery
- Webpack - nejpopulárnější, velmi konfigurovatelný
- Vite - rychlý, moderní, jednoduchý
- RsBuild - rychlý, Rust-based
- Parcel - zero-configuration
- Rollup - optimalizovaný pro knihovny
Vite - rychlý bundler
Vite (francouzsky rychle) je velmi populární bundler pro React.
Proč Vite?
- ⚡ Rychlý - okamžité spuštění dev serveru
- 🔥 Hot Module Replacement - okamžité aktualizace
- 📦 ES modules - nativní podpora
- 🛠️ Zero-config - funguje out-of-the-box
- 🎯 Optimalizovaný - rychlý build pro produkci
- 🌐 Univerzální - jednoduše nastartuje projekt ve vícero jazycích (JavaScript, TypeScript, CSS, HTML), nebo v kombinaci s jinými technologiemi (React, Vue, Angular, Svelte…)
Start projektu s Vite
# Vytvoření nového React projektu
npm create vite@latest my-react-app -- --template react
# Nebo přidání do existujícího projektu
npm install vite @vitejs/plugin-reactRsBuild - rychlý bundler
RsBuild je rychlý bundler pro React. Je napsaný v jazyce Rust, ve kterém se píšou rychlé a efektivní programy s bezpečnou správou paměti.
Proč RsBuild?
Obdoba Vite, ale ještě rychlejší :)
- ⚡ Velmi rychlý - ještě rychlejší než Vite
- Napsaný v Rustu - rychlý, efektivní, bezpečný
JSX - JavaScript XML
Co je JSX?
JSX je rozšíření syntaxe pro JavaScript, která umožňuje psát kód podobný HTML v JavaScriptu.
Jednotlivé prvky jsou vytvářeny pomocí
React.createElement(viz níže)React využívá JSX k psaní struktury a vykreslování komponent.
const Component = () => {
return <div>
<h1>Hello World</h1>
<p>This is a paragraph</p>
</div>
}
export default Component;CSS styly
/* style.css */
.component {
border: 2px solid #8B4513;
padding: 20px;
margin: 20px;
border-radius: 10px;
background-color: #F5DEB3;
font-family: Arial, sans-serif;
}Hlavní soubor
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './style.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<CoffeeMachine />
</React.StrictMode>,
)Výhody JSX oproti React.createElement
1. Čitelnost
// React.createElement - těžko čitelné
return h('div', { className: 'coffee-machine' },
h('h2', null, 'React Automat na kafe'),
h('div', { className: 'display' }, getStatusText())
);
// JSX - snadno čitelné
return (
<div className="coffee-machine">
<h2>React Automat na kafe</h2>
<div className="display">{getStatusText()}</div>
</div>
);2. Podobné HTML (které už znáš)
- Vypadá jako HTML, které už znáš
- Snadné pro frontend vývojáře
- Intuitivní syntax
3. podpora napříč IDE
- Syntax highlighting
- Autocomplete
- Error detection
- Refactoring tools
4. Komponenty
Komponenty jsou znovupoužitelné části UI
Komponenty jsou funkce, které vrací JSX prvek, nebo tzv. fragment.
// Snadné vytváření komponent
const PrintPetName = ({ name }) => {
return (
<div className="pet-name">
{name}
</div>
);
}
export default PrintPetName;import PrintPetName from './PrintPetName';
// Použití komponenty
<PrintPetName name="Rex" />Praktické cvičení
🎯 Úkol: Vytvoření CV aplikace v React
Nyní si vytvoříme praktický projekt - CV aplikaci v React s JSX:
1. Vytvoření Vite projektu
# Vytvoření nového projektu
npm create vite@latest mujuzasnyprojekt
cd mujuzasnyprojekt
npm install
npm run devShrnutí
Bundlery řeší:
- ✅ Kombinování souborů
- více souborů složí do jednoho funkčního celku
- ✅ Optimalizace kódu
- minifikace odstraní bílé znaky a zkrátí názvy proměnných
- tree shaking odstraní nepoužitý kód
- ✅ Transformace moderního JS na nižší verzi, aby byl kompatibilní se staršími prohlížeči (tzv. lowering)
- ✅ Zpracování závislostí - automatické řešení importů a exportů
JSX poskytuje:
- ✅ Čitelný kód - vypadá jako HTML, které už znáš
- ✅ IDE podporu - syntax highlighting, autocomplete, error detection, refactoring tools
- ✅ Snadnější tvorbu komponent - intuitivní zápis
Vite/RsBuild nabízí:
- ✅ Rychlý vývojářský server - okamžité spuštění
- ✅ Hot Module Replacement - okamžité aktualizace komponent po změně a uložení kódu
- ✅ Zero-configuration - fungují téměř out-of-the-box (bez nutnosti konfigurace)
- ✅ Optimalizovaný build - je možné rychle vytvořit produkční optimalizovanou verzi aplikace
🎯 Klíčové výhody JSX
- Čitelnost - kód je strukturovaný, snadno čitelný a pochopitelný
- Jednoduchost - vypadá jako HTML, které už znáš
- Komponenty - snadné vytváření a použití komponent
- JavaScript - plná síla JavaScriptu v HTML
- IDE podpora - výborná podpora v editorech