ReactJS - .JS vs .JSX

211

Jest coś, co wydaje mi się bardzo mylące podczas pracy React.

Istnieje wiele przykładów dostępnych w Internecie, które wykorzystują .jspliki z reakcją, ale wiele innych używa .jsxplików.

Przeczytałem o .jsxplikach i rozumiem, że pozwalają one po prostu pisać tagi HTML w twoim pliku javascript. Ale to samo można również zapisać w .jsplikach.

Jaka jest rzeczywista różnica między tymi dwoma rozszerzeniami .jsa .jsx?

reactjs jsx

— confusedDeveloper
źródło

172

Nie ma żadnych, jeśli chodzi o rozszerzenia plików. Twój program pakujący / transpiler / cokolwiek zajmuje się ustaleniem rodzaju zawartości pliku.

Istnieją jednak pewne inne uwagi przy podejmowaniu decyzji, co umieścić w typie pliku .jslub .jsxpliku. Ponieważ JSX nie jest standardowym JavaScriptem, można argumentować, że wszystko, co nie jest „zwykłym” JavaScriptem, powinno przejść do własnych rozszerzeń, np. .jsxDla JSX i .tsTypeScript.

Tutaj jest dobra dyskusja do przeczytania

— Henrik Andersson
źródło

6

Niezły link! Dla mnie ta dyskusja jest również interesująca!

— Felipe Augusto,

1

Dobrze powiedziane. JSX nie jest ani JS, ani HTML, więc nadanie mu własnego rozszerzenia pomaga wskazać, co to jest - nawet jeśli używanie .jsxnie jest wymagane

— STW

35

W większości przypadków jest to tylko potrzeba transpilatora / bundlera, który może nie być skonfigurowany do pracy z plikami JSX, ale z JS! Jesteś zmuszony używać plików JS zamiast JSX.

A ponieważ reaktor to tylko biblioteka dla javascript, nie ma znaczenia, czy wybierzesz między JSX a JS. Są całkowicie wymienne!

W niektórych przypadkach użytkownicy / programiści mogą również wybrać JSX zamiast JS, ze względu na wyróżnianie kodu, ale większość nowszych edytorów również poprawnie wyświetla składnię reagowania w plikach JS.

— marpme
źródło

27

Znaczniki JSX ( <Component/>) najwyraźniej nie są standardowym językiem javascript i nie mają specjalnego znaczenia, jeśli na przykład umieścisz je w samym <script>tagu. Dlatego wszystkie zawierające je pliki React to JSX, a nie JS.

Umownie punktem wejścia aplikacji React jest zwykle .js zamiast .jsx, nawet jeśli zawiera on składniki React. Równie dobrze może to być .jsx. Wszelkie inne pliki JSX mają zwykle rozszerzenie .jsx.

W każdym razie powodem tej dwuznaczności jest to, że ostatecznie rozszerzenie nie ma większego znaczenia, ponieważ transpiler szczęśliwie omija wszelkiego rodzaju pliki, o ile faktycznie są one JSX.

Moja rada brzmi: nie martw się o to.

— Jlaitio
źródło

Nawet var elem = <div>Text</div>;nie jest standardowym elementem HTML; nie obsługuje appendChild, classListi prawdopodobnie inne funkcje HTML. Jeśli chcesz tagów HTML bezpośrednio w javascript, lepiej użyć literału szablonu (backtick `) razem z innerHtmllub outerHtml.

— Strateg Myśliciel

7

Oprócz wspomnianego faktu, że tagi JSX nie są standardowym javascriptem, używam rozszerzenia .jsx, ponieważ z nim Emmet nadal działa w edytorze - wiesz, ta przydatna wtyczka, która rozwija kod HTML, na przykład ul> li w

<ul>
  <li></li>
</ul>

— Gabriel Vasile
źródło

Możliwe jest użycie Emmeta do plików .js w programie Visual Studio Code, dodając następujące ustawienia do pliku settings.json: "emmet.includeLanguages": { "javascript": "javascriptreact" }ale tak, zgadzam się, że kod JSX powinien używać rozszerzenia .jsx, jeśli to możliwe.

— Thomas Higginbotham,

6

Jak wspomniano, JSXnie jest standardowym rozszerzeniem Javascript. Lepiej nazwać swój punkt wejścia aplikacji w oparciu o .jspozostałe komponenty, których możesz użyć .jsx.

Mam ważny powód, dla którego używam .JSXwszystkich nazw plików składników. W rzeczywistości, w dużym projekcie z dużą ilością kodu, jeśli ustawimy cały komponent React z .jsxrozszerzeniem, łatwiej będzie nawigować do różnych plików javascript w całym projekcie (np. Pomocników, oprogramowania pośredniego itp.) I wiesz, że to jest składnik React, a nie inne typy pliku javascript.

— Siavash
źródło

4

JSX nie jest standardowym JavaScriptem, opartym na przewodniku po stylu Airbnb, „eslint” może wziąć pod uwagę ten wzorzec

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

jako ostrzeżenie, jeśli nazwiesz plik MyComponent.jsx, przejdzie on, chyba że jeśli edytujesz regułę eslint, możesz sprawdzić przewodnik po stylu tutaj

— Majid Eltayeb
źródło