React + TypeScript bevezetés

A React egy JavaScript könyvtár, amelyet a felhasználói felületek egyszerű és gyors fejlesztésére hoztak létre. Egy komponensalapú megközelítést használ, amely lehetővé teszi a komplex felhasználói interfészek egyszerűbb és modulárisabb felépítését. A React főleg a nézetek kezelésére koncentrál az MVC modellben.

A TypeScript a JavaScript egy kiterjesztése, amely statikus típusokat vezet be. Ezzel lehetőségünk van erősebb típusellenőrzésre már a fejlesztési folyamat során, ami segíthet a hibák minimalizálásában. A TypeScript különösen hasznos, ha nagyobb projekteket fejlesztünk, és amikor tiszta és olvasható kódot szeretnénk írni.

Miért használjuk a TypeScriptet a React projektekben?

• Erősebb típusellenőrzés: TypeScript használatával elkerülhetjük a JavaScript típushibáit.
• Tisztább kód: Könnyebb fenntartani a kódot, különösen nagyobb csapatok esetén.
• Eszközök támogatása: Jobb támogatást nyújt az IDE-kben, például az IntelliSense és az automatikus kódkitöltés révén.

Projekt létrehozása

Egy új React projekt TypeScripttel történő létrehozásához az alábbi parancsot futtathatjuk:

npx create-react-app my-app --template typescript

Ez létrehoz egy előre konfigurált React projektet TypeScripttel. A fájlszerkezet hasonló lesz egy hagyományos React projekthez, de a .js fájlok helyett .ts és .tsx fájlokat használunk.

Projekt szerkezete

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

node_modules/ mappa

Ez a mappa a projekt összes függőségét tartalmazza, amit az npm install parancs lefutása után tölt le a rendszer. Ide kerülnek azok a könyvtárak, amikre a React és TypeScript alapú projektünknek szüksége van.

public/ mappa

A public/ mappa tartalmazza azokat a statikus fájlokat, amik közvetlenül kerülnek kiszolgálásra. A legfontosabb fájl ebben a mappában az index.html, amely a React alkalmazásunk belépési pontja. A public/ mappa tartalma nem változik dinamikusan a React komponensek változásaival, kivéve azokat az erőforrásokat (képek, ikonok), amelyeket statikusan szeretnénk beilleszteni.

• index.html: Ez az alapértelmezett HTML fájl, amely tartalmazza azt az elemet (<div id="root"></div>), ahova a React DOM kerül beszúrásra.

src/ mappa

A src/ mappa tartalmazza a projektünk fő kódját, és a React komponensek forráskódját. A TypeScript miatt a fájlok .tsx kiterjesztéssel rendelkeznek, ami jelzi, hogy ezek TypeScript és JSX kombinációjú fájlok.

index.tsx fájl

Ez az a fájl, ahol a React alkalmazásunk kezdőpontja van. Innen renderelődik a public/index.html fájlba az alkalmazás, a ReactDOM.render hívás segítségével.

Tartalma így néz ki

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.tsx fájl

Ez a fő komponens, amely az alkalmazás alapértelmezett megjelenítéséért felel. Ebben definiálhatjuk az összes fő funkciót, amely a React applikációnk alapját képezi.

Megjegyzés

Az alábbi kódrészletet a React automatikusan hozza létre a projekt létrehozásakor. Ebben a példában egy egyszerű üdvözlő oldalt jelenítünk meg, amely tartalmaz egy logót, egy szöveges üzenetet és egy hivatkozást a React weboldalára.

Példa tartalom

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.test.tsx fájl

Ez a fájl tesztelési célokra szolgál. Az alkalmazás teszteléséhez használhatjuk a React Testing Library-t vagy más tesztelési keretrendszereket, például a Jest-et.

react-app-env.d.ts fájl

Ez egy automatikusan generált fájl, amely tartalmazza a szükséges TypeScript típusdefiníciókat a Create React App számára. Ezt nem szükséges módosítanod.

setupTests.ts fájl

Ez a fájl a projekt tesztelési környezetét készíti elő. Ez különösen akkor hasznos, ha Jest tesztelési környezetet használunk.

tsconfig.json fájl

Ez a fájl a TypeScript konfigurációját tartalmazza. Itt állítható be, hogy milyen TypeScript beállítások alapján működjön a projekt, például a fájlok célplatformja, és hogy milyen szigorú legyen a típusellenőrzés.

Például egy alap tsconfig.json fájl tartalma

{
"compilerOptions": {
    "target": "es5", // (1)
    "lib": ["dom", "dom.iterable", "esnext"], // (2)
    "allowJs": true, // (3)
    "skipLibCheck": true, // (4)
    "esModuleInterop": true, // (5)
    "allowSyntheticDefaultImports": true, // (6)
    "strict": true, // (7)
    "forceConsistentCasingInFileNames": true, // (8)
    "noFallthroughCasesInSwitch": true, // (9)
    "module": "esnext", // (10)
    "moduleResolution": "node", // (11)
    "resolveJsonModule": true, // (12)
    "isolatedModules": true, // (13)
    "noEmit": true, // (14)
    "jsx": "react-jsx" // (15)
},
"include": ["src"] // (16)
}

1. A target beállítás azt határozza meg, hogy milyen JavaScript verzióra fordítja le a TypeScript kódot. Az es5 a régebbi böngészők támogatását is biztosítja.
2. A lib beállítások meghatározzák, hogy milyen beépített könyvtárakat (API-kat) használhat a TypeScript kód, például a DOM manipulálásához szükséges funkciókat.
3. Az allowJs lehetővé teszi, hogy a TypeScript projekt JavaScript fájlokat is tartalmazzon és használjon.
4. A skipLibCheck beállítással a TypeScript kihagyja a beépített könyvtárak típusellenőrzését, ami gyorsabb fordítást eredményezhet.
5. Az esModuleInterop engedélyezi a jobb kompatibilitást az ES modulrendszer és a CommonJS modulok között.
6. Az allowSyntheticDefaultImports lehetővé teszi, hogy alapértelmezett importokat szintetikusan használjunk olyan moduloknál, amelyek nem támogatják az alapértelmezett exportokat.
7. A strict beállítás bekapcsolja a szigorú típusellenőrzési szabályokat, amelyek biztonságosabb kódot eredményeznek.
8. A forceConsistentCasingInFileNames kényszeríti a fájlnevek kis- és nagybetű érzékeny kezelését a projektben, ami segít elkerülni a platform-specifikus hibákat.
9. A noFallthroughCasesInSwitch megakadályozza, hogy a switch case ágak automatikusan továbblépjenek a következő ágra anélkül, hogy break utasítást adnánk.
10. A module beállítás az alkalmazott modulrendszert határozza meg, itt az esnext értéket használja, ami a legújabb ECMAScript modultámogatást használja.
11. A moduleResolution beállítás megadja, hogyan keresse meg a modulokat a fordító. A node érték azt jelenti, hogy a Node.js modulkeresési logikáját használja.
12. A resolveJsonModule lehetővé teszi JSON fájlok importálását TypeScript fájlokba.
13. Az isolatedModules biztosítja, hogy minden fájl önállóan forduljon le, ami elősegíti a gyorsabb fordítást és jobb modulfelépítést.
14. A noEmit beállítás megakadályozza a .js fájlok generálását, csak a típusellenőrzést végzi el.
15. A jsx beállítás a JSX szintaxist kezeli. A react-jsx értékkel engedélyezi a modern JSX feldolgozást a React projektekhez.
16. Az include beállítás megadja, hogy a src mappában található fájlokat vegye figyelembe a fordító.

Ellenőrző kérdések

// Hibás kód 1
let num: number = "Hello"; // Ez típushiba. Melyik `tsconfig.json` beállítás segítene az ilyen hibák azonnali felismerésében?

// Hibás kód 2
switch (value) {
case 1:
    console.log("Egy");
case 2:
    console.log("Kettő");
    // Melyik beállítás figyelmeztet, hogy nincs `break` a switch case-ekben?
}

// Hibás kód 3
import data from './data.json';
// Melyik beállítás segítené, hogy a JSON fájl importálható legyen?

Pojekt futtatása

A TypeScripttel készített React projekt futtatása hasonló a hagyományos JavaScript verzióhoz. A következő parancsokat használhatjuk a projekt futtatásához:

• npm start: Elindítja a fejlesztői szervert.
• npm run build: Létrehoz egy optimalizált, éles környezetbe szánt verziót az alkalmazásból a build/ mappában.
• npm test: Elindítja a projekt tesztjeit.
• npm run eject: Eltávolítja a Create React App rejtett konfigurációját, és megmutatja az összes beállítást. Haladóknak ajánlott.

PWA (Progressive Web App) támogatás

A React alkalmazásokat könnyen átalakíthatjuk PWA-kká, amelyek offline módban is működnek, és lehetővé teszik a felhasználók számára, hogy a webalkalmazásokat a kezdőképernyőre mentve használják.

A következő böngészők támogatják a PWA-kat: Chrome, Firefox, Edge, Safari, Opera.

Összefoglalás

A React + TypeScript projekt létrehozása és futtatása nagyon hasonló a JavaScript verzióhoz, de néhány fájl különbözik a TypeScript támogatása miatt. A fájlok .ts és .tsx kiterjesztést kapnak, a tsconfig.json pedig a TypeScript konfigurációkat tartalmazza. A create-react-app megkönnyíti a fejlesztést, és az alapvető parancsok segítségével könnyedén kezelhetjük az alkalmazásunkat.