Toolverse
Wszystkie skille

react-strict-dom

autor: EvanBacon

Uniwersalne komponenty React z HTML i CSS dla aplikacji Expo na web i mobile

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Frontend

O skillu

react-strict-dom to umiejętność konfiguracji biblioteki, która pozwala pisać komponenty React używające podzbioru HTML i CSS, działające identycznie na platformach web i native. Skill obejmuje konfigurację Babel do transformacji komponentów dla każdej platformy, wtyczkę PostCSS do przetwarzania stylów oraz komponenty HTML opakowane CSS-em z obsługą klas Tailwind. Idealne dla zespołów budujących uniwersalne aplikacje Expo, które muszą działać zarówno w przeglądarce, jak i na urządzeniach mobilnych.

Jak używać

  1. Zainstaluj react-strict-dom w wersji 0.0.54 używając bun: bun install react-strict-dom@0.0.54. Unikaj wersji 0.0.55, która ma uszkodzoną zależność postcss-react-strict-dom.

  2. Utwórz lub zaktualizuj plik babel.config.js w katalogu głównym projektu. Dodaj preset react-strict-dom z opcjami debug: true, dev (automatycznie wykrywane z zmiennych środowiskowych) i platform (przekazywane przez bundler). Upewnij się, że babel-preset-expo jest załadowany przed react-strict-dom preset.

  3. Skonfiguruj PostCSS, aktualizując plik postcss.config.mjs. Dodaj wtyczkę react-strict-dom/postcss-plugin do przetwarzania stylów dla buildu web.

  4. Włącz dyrektywy react-strict-dom w globalnym CSS, dodając @react-strict-dom w pliku CSS, aby umożliwić obsługę stylów biblioteki.

  5. Zacznij pisać komponenty używając HTML wrapper components z obsługą klas Tailwind CSS v4. Komponenty będą automatycznie transformowane dla każdej platformy (web, iOS, Android) dzięki konfiguracji Babel i PostCSS.

Podobne skille