React

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 verificat folosind ESLint cu configurația recomandată pentru React.

Fișierul de pornire

Fișierul de pornire pentru acest șablon trebuie să fie unul dintre următoarele: main.jsx sau index.jsx. Primul găsit este utilizat ca punct de pornire.

Versiune

Rulează pe Node.js v20.0.0

Limbi acceptate

Javascript

Framework de testare

Jest

Precizări speciale și detalii de implementare

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

Exemplu cu React Testing Library:

import {cleanup, render, screen } from '@testing-library/react';

import App from './App.jsx';

afterEach(cleanup);

describe('App', () => {
  test('Should display "Hello World!"', () => {
    render(<App />);
    expect(screen.getByText("Hello World!")).toBeInTheDocument();
  });
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești hook-urile și context API din React pentru gestionarea stării și efecte secundare.

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

Cum se depanează

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

Pași pentru depanare folosind log-uri în consolă

1. Identifică zona cu probleme: Identifică cu precizie 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 pentru a afișa valorile variabilelor și a urmări fluxul de execuție.

3. Verifică rezultatele afișate ale testelor tale

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare pentru a verifica output-ul consolei sau verifică consola browserului tău.

5. Analizează rezultatele: Examinează output-ul înregistrat în consolă pentru a înțelege fluxul de execuție al aplicației tale React și pentru a identifica potențialele probleme.

Iată un exemplu de utilizare a console.log() pentru depanare în React:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Button clicked!'); // Log button click
    setCount(count + 1);
  };

  console.log('Current count:', count); // Log current count

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

export default Counter;