ReactJS - .JS vs .JSX

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?

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

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.

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.

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>

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.

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