Estrai ed esporta
Export in React
Esporta una sezione di qualsiasi sito in React con Pickode: JSX con classi BEM e CSS preso solo dalle regole dell'autore, o React + Tailwind.
Aggiornata il 20 ottobre 2026
Usa l’export React quando vuoi portare in un progetto React, come componente, una sezione che ti piace o una sezione di un sito che stai migrando. Pickode ti dà due varianti: React (JSX + CSS) con classi BEM e React + Tailwind.
Come esportare una sezione in React
-
Apri l’inspector con Alt+I su qualsiasi pagina e fai clic sulla sezione o sul componente che ti serve.
-
Scegli React nella finestra di export (oppure React + Tailwind se il tuo progetto usa Tailwind).
-
Controlla l’anteprima isolata a 375, 768, 1024 e 1280 px, o in uno dei 27 dispositivi con cornice.
-
Copia il codice o scarica i file e mettili nel tuo progetto.
Cosa ottieni
| Formato | Risultato |
|---|---|
| React (JSX + CSS) | Un componente JSX con classi BEM e un file CSS con le regole dell’autore |
| React + Tailwind | Un componente JSX con classi Tailwind e valori arbitrari presi dal CSS dell’autore |
Entrambi i formati partono dai fogli di stile originali del sito, non dai valori calcolati dal browser. Il CSS quindi è corto e tiene quello che l’autore ha scritto:
- ogni regola
@media,@supportse@container; - stati come
:hover,:focus,:focus-visible,:focus-withine:active, anche quando stanno su un antenato (per esempio.card:hover .titolo); ::beforee::after;- le
var()risolte con il valore del sito e gli URL relativi resi assoluti.
Per i dettagli su come viene letto il CSS vedi Export in HTML + CSS. Per come nascono le classi Tailwind vedi Export in Tailwind.
Free e Pro
Limiti
Pickode serve a studiare, ispirarsi, analizzare e migrare siti su cui lavori. Rispetta diritti d’autore e licenze e non ripubblicare design, testi o immagini altrui senza permesso.
Correlati
Ancora bloccato?Contattaci