SolidJS

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

Fișierul de intrare

Fișierul componentei este App.jsx. Fișierul main.jsx (preîncărcat, doar în citire) montează componenta ta App în pagină folosind solid-js/web:

import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root'));

Versiune

Rulează pe Node.js v20.0.0

Limbaje suportate

Javascript

Framework de testare

Vitest

Mementouri speciale și detalii de implementare

• Testele sunt scrise cu @solidjs/testing-library, care împachetează componentele SolidJS pentru o randare prietenoasă cu aserțiunile.
• render acceptă o funcție care returnează JSX (() => <App />) — acest lucru corespunde modului în care SolidJS montează componentele și oferă testului aceeași rădăcină reactivă pe care ar avea-o aplicația reală.
• Folosește primitive SolidJS (createSignal, createEffect, createMemo) în loc de hook-uri în stil React — acestea par similare, dar se comportă diferit (reactivitate fin granulară, fără re-randări).

Exemplu cu @solidjs/testing-library:

import { render, screen } from '@solidjs/testing-library';
import App from './App';

describe('App', () => {
  test("says 'Hello, World!'", () => {
    render(() => <App />);
    const node = screen.queryByText('Hello, World!');
    expect(node).toBeInTheDocument();
  });
});

Biblioteci incluse

• solid-js
• @solidjs/testing-library
• @testing-library/jest-dom
• @testing-library/user-event
• jsdom
• vite
• vite-plugin-solid
• vitest

Cum să depanezi

Depanarea codului SolidJS este similară cu depanarea JavaScript. Folosește console.log() pentru a inspecta valorile semnalelor în interiorul createEffect sau direct în interiorul expresiilor JSX.

Pași pentru depanare folosind loguri în consolă

1. Identifică zona cu probleme: Localizează componenta sau semnalul pe care vrei să le inspectezi.

2. Introdu instrucțiuni console.log(): Înregistrează valorile semnalelor în interiorul createEffect pentru ca acestea să ruleze din nou ori de câte ori semnalul se modifică, sau înregistrează-le direct în JSX.

3. Verifică rezultatul din secțiunea Results Output a testelor tale

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

5. Analizează rezultatul: Compară logurile cu interfața grafică randată pentru a depista semnale învechite sau actualizări lipsă.

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

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    console.log('count is now', count()); // Log every time count changes
  });

  const handleClick = () => {
    console.log('Button clicked, current count:', count());
    setCount(count() + 1);
  };

  return <button onClick={handleClick}>{count()}</button>;
}