JSX na JavaScript: z kodu Reacta w zwykły JS
JSX na JavaScript to zamiana składni znaczników w komponentach Reacta na zwykły JavaScript, który przeglądarka potrafi uruchomić. Narzędzie używa Babela, więc wynik odpowiada temu, co zapisałby krok budowania z Babelem. Wybierasz między klasycznymi wywołaniami React.createElement a automatycznym runtime jsx() i kopiujesz wynik. Twój kod jest kompilowany w przeglądarce, nigdy nie jest wysyłany ani uruchamiany.
JSX na JS online: jak to zrobić
Nie musisz niczego instalować ani zakładać konta:
- Wklej kod do pola Kod JSX. Dopóki jest puste, widać w nim „Wklej tutaj JSX…”. Limit to 1 000 000 znaków.
- Poczekaj chwilę. Narzędzie kompiluje w trakcie pisania lub wklejania, mniej więcej jedną trzecią sekundy po ostatniej zmianie, więc nie ma przycisku do naciśnięcia. Za pierwszym razem Babel pobiera się jednorazowo, co trwa nieco dłużej.
- Odczytaj wynik pod nagłówkiem JavaScript. Pojawia się jako kod tylko do odczytu, z podświetlaniem składni.
- Wybierz Kopiuj do schowka. Przycisk zmieni się w Skopiowano.
- Aby zmienić sposób kompilacji JSX, użyj przycisku z kołem zębatym obok (Ustawienia runtime JSX). Otwiera grupę Runtime JSX z dwiema opcjami, Klasyczny i Automatyczny. Po zmianie kod kompiluje się ponownie.
Jeśli tekst nie jest poprawnym JSX, zobaczysz komunikat o błędzie składni z numerem wiersza i kolumny, błędny wiersz oraz znak ^ pod właściwym miejscem, a wyniku nie będzie, dopóki nie poprawisz błędu. Jeśli w kodzie w ogóle nie ma JSX, wróci on jako zwykły JavaScript z komunikatem „W tym kodzie nie znaleziono JSX, więc wrócił jako zwykły JavaScript.”
JSX React createElement: klasyczny czy automatyczny
W trybie Klasyczny, domyślnym, każdy element staje się wywołaniem React.createElement(type, props, ...children), a fragment to React.Fragment. Nie jest dodawany żaden import, więc React musi być w zasięgu. Wybierz go, jeśli Twój projekt lub poradnik nadal importuje Reacta w każdym pliku albo celujesz w starszą konfigurację.
W trybie Automatyczny JSX zamienia się w wywołania jsx() lub jsxs(), dzieci trafiają do props, a fragment nazywa się _Fragment. Dodawany jest import z react/jsx-runtime, tylko z nazwami, których kod używa. Wymaga to Reacta 17 lub nowszego i daje wynik taki, jaki wyprodukowałby obecny zestaw narzędzi Reacta.
Co narzędzie zachowuje, a co zmienia
- Importy i eksporty zostają takie, jak je napisałeś.
- Komentarze zostają na swoim miejscu.
- Zwykły JavaScript wokół JSX pozostaje bez zmian, poza układem Babela.
- Formatowanie pochodzi z Babela, nie z Prettiera: Twoje cudzysłowy i podziały wierszy w JSX nie zostają zachowane. Aby uporządkować wynik, przepuść go przez narzędzie Formatowanie kodu.
- Przed wywołaniami elementów pojawiają się adnotacje
/*#__PURE__*/. Informują one bundlery, że wywołanie nie ma skutków ubocznych.
Czego narzędzie nie robi: TSX, TypeScript i Flow
Kompiluje wyłącznie JSX. Nie czyta TypeScriptu, więc TSX z adnotacjami typów daje błąd składni, a Flow również nie jest obsługiwany. Nie uruchamia Twojego kodu, nie sprawdza, czy komponenty działają, i nie łączy plików w paczkę.
Aby pójść w drugą stronę, od zwykłego JavaScriptu do kodu z typami, skorzystaj z narzędzia Konwerter JS na TS. Do czytania zminifikowanych lub zaciemnionych skryptów służy Deobfuskator JavaScript.
Babel JSX online bez wysyłania kodu
Babel ładuje się raz, przy pierwszym wklejeniu, a potem kompilacja odbywa się w Web Workerze na Twoim urządzeniu. Komponent nie jest nigdzie wysyłany ani nigdy uruchamiany, więc możesz bez obaw wkleić plik ze skutkami ubocznymi.
Najczęściej zadawane pytania
Jak przerobić JSX do JavaScript online?
Wklej JSX do pola „Kod JSX”. Mniej więcej jedną trzecią sekundy później skompilowany JavaScript pojawi się pod nagłówkiem „JavaScript”. Nie ma przycisku konwersji, a wynik zabierzesz przyciskiem „Kopiuj do schowka”. Babel pobiera się jednorazowo przy pierwszym wklejeniu, więc pierwsza konwersja trwa chwilę dłużej.
Czy Babel kompiluje JSX do JavaScriptu?
Tak. Preset React w Babelu kompiluje JSX do JavaScriptu i dokładnie to uruchamia ta strona w Twojej przeglądarce, więc wynik odpowiada krokowi budowania z Babelem. Narzędzia do budowania robią to samo automatycznie przy budowie projektu. Użyj tej strony, gdy chcesz zobaczyć lub skopiować wynik dla pojedynczego komponentu albo fragmentu.
Jaka jest różnica między JS a JSX?
JSX to JavaScript ze składnią podobną do XML, służącą do opisu interfejsu, na przykład znacznik button z obsługą onClick. Przeglądarki nie potrafią go uruchomić, więc kompilator przepisuje każdy znacznik na zwykłe wywołanie funkcji. Wynik to zwykły JavaScript. Rozszerzenie .jsx to tylko konwencja nazewnicza plików zawierających JSX.
Czym różni się runtime klasyczny od automatycznego?
Klasyczny zamienia JSX na wywołania React.createElement, więc React musi być w zasięgu w każdym pliku z JSX. Automatyczny zamienia go na wywołania jsx() i jsxs() oraz sam dodaje import z react/jsx-runtime, dzięki czemu nie importujesz Reacta tylko po to, by pisać JSX. Automatyczny wymaga Reacta 17 lub nowszego. Domyślny jest tu „Klasyczny”.
Jak zamienić JSX w wywołania React.createElement?
Zostaw runtime JSX na „Klasyczny”, czyli na ustawieniu domyślnym. Każdy element staje się wywołaniem React.createElement: najpierw nazwa znacznika, potem obiekt props (null, gdy go nie ma), potem dzieci. Fragment zamienia się w React.Fragment.
Dlaczego wynik używa Reacta, ale go nie importuje?
Wynik w trybie klasycznym wywołuje React.createElement i React.Fragment bez dodawania importu, bo zakłada, że React jest już w zasięgu. Jeśli Twój plik nie zaczyna się od import React from 'react', dodaj tę linię albo przełącz runtime JSX na „Automatyczny”, który sam zapisze potrzebny import.
Dlaczego w wyniku są komentarze /*#__PURE__*/?
Babel umieszcza /*#__PURE__*/ przed każdym wywołaniem elementu. Informuje to minifikatory i bundlery, że wywołanie nie ma skutków ubocznych, więc element, który nigdy nie jest używany, może wypaść z gotowej paczki. Komentarze możesz zostawić lub usunąć, nie zmieniają działania kodu.
Czy narzędzie obsłuży TSX lub TypeScript?
Nie. Oczekuje JSX w zwykłym JavaScripcie, więc adnotacja typu, taka jak props: Props, jest błędem składni. Najpierw usuń typy albo skompiluj TypeScript kompilatorem TypeScript. Składnia Flow również nie jest obsługiwana.
Czy mój kod jest wysyłany lub uruchamiany?
Nie. Babel kompiluje kod w Twojej przeglądarce, w Web Workerze, i nic nie jest wysyłane na serwer. Kod nie jest też nigdy uruchamiany, więc możesz bez obaw wkleić komponent ze skutkami ubocznymi. Pobierany jest tylko sam Babel, raz.
Polecane
-
Magnetyczna tablica biurkowa z pisakamiNarysuj drzewo komponentów i zobacz, które wywołanie createElement leży w którym.
-
Przenośny monitor KYY 15,6"Trzymaj tutorial lub dokumentację na drugim ekranie, gdy porównujesz swój JSX z wynikiem.
-
Lampka na monitor QuntisOświetla biurko, a nie ekran, podczas nocnego debugowania.
Pomaga utrzymać narzędzia za darmo. ✨
Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.
