React (TypeScript)

Ar trebui să creezi o componentă funcțională numită App ca punct principal de intrare al aplicației tale React. Codul tău React ar trebui să fie verificat folosind ESLint cu configurația recomandată pentru React și TypeScript.

Fișier de intrare

Fișierul de intrare pentru acest șablon trebuie să fie unul dintre următoarele: main.tsx sau index.tsx. Primul care este prezent va fi folosit ca punct de intrare.

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

TypeScript

Framework de testare

Jest

Recomandări speciale și detalii de implementare

• React Testing Library, o bibliotecă care ajută la testarea componentelor React. Este construită peste DOM Testing Library prin adăugarea de API-uri pentru lucrul cu componente React.

Exemplu cu React Testing Library:

import "@testing-library/jest-dom/jest-globals";
import * as React from "react";

import { describe, expect, it } from "@jest/globals";
import { render, screen } from "@testing-library/react";
import HelloWorld from "./App";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(React.createElement(HelloWorld));
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Nu uita să păstrezi întotdeauna componentele modulare și să folosești hook-urile și API-ul context din React pentru gestionarea stării și a efectelor secundare. Folosește tipuri și interfețe TypeScript pentru props și stare.

Biblioteci incluse

• @babel/preset-env
• babel-jest
• @babel/preset-react
• @testing-library/react
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• jest-transform-stub
• typescript

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Jest (ts-jest) + @testing-library/react
• Fișierele de test sunt *.spec.ts, nu .tsx: randează cu React.createElement(App) în loc de JSX.
• Importă mai întâi @testing-library/jest-dom/jest-globals ca toBeInTheDocument() să fie tipat și înregistrat.
• Pentru input-urile controlate folosește fireEvent.change(input, { target: { value } }).

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum se depanează

Depanarea codului React cu TypeScript este esențială pentru identificarea și remedierea problemelor. Utilizarea instrucțiunilor console.log() poate ajuta în acest proces.

Pași pentru depanare folosind console.log

1. Identifică zona cu probleme: Localizează componenta sau funcția din codul tău React unde suspectezi că se află problema.

2. Introdu instrucțiuni console.log(): Plasează strategic instrucțiuni console.log() înainte și după codul suspectat ca fiind problematic pentru a înregistra valorile variabilelor și a urmări fluxul de execuție.

3. Verifică rezultatele afișate de testele tale

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare (Debug) din zona Preview pentru a verifica rezultatele din consolă sau verifică consola browserului tău.

5. Analizează rezultatele: Examinează datele afișate în consolă pentru a înțelege fluxul de execuție al aplicației tale React și pentru a identifica eventualele probleme.

Iată un exemplu despre cum să folosești console.log() pentru depanare în React cu TypeScript:

import React, { FC, useState } from "react";

const Counter: FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = (): void => {
    console.log("Button clicked!");
    setCount((prevCount: number) => prevCount + 1);
  };

  console.log("Current count:", count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;