C'è qualcosa che trovo molto confuso quando lavoro React.
Ci sono molti esempi disponibili su Internet che usano i .jsfile con reazioni, ma molti altri usano i .jsxfile.
Ho letto dei .jsxfile e la mia comprensione è che ti permettono di scrivere tag html nel tuo javascript. Ma la stessa cosa può essere scritta anche nei .jsfile.
Allora, qual è la differenza effettiva tra queste due estensioni .jse .jsx?
Risposte:
Non c'è nessuno quando si tratta di estensioni di file. Il tuo bundler / transpiler / qualunque cosa si occupi di risolvere il tipo di contenuto del file.
Vi sono tuttavia alcune altre considerazioni quando si decide cosa inserire in un .jso un .jsxtipo di file. Dato che JSX non è JavaScript standard, si potrebbe sostenere che tutto ciò che non è "semplice" JavaScript dovrebbe entrare nelle proprie estensioni, .jsxad esempio per JSX e .tsper TypeScript.
.jsxnon è un requisito
Nella maggior parte dei casi è solo necessario il transpiler / bundler, che potrebbe non essere configurato per funzionare con i file JSX, ma con JS! Quindi sei costretto a utilizzare i file JS anziché JSX.
E dal momento che reazioni è solo una libreria per javascript, non fa alcuna differenza scegliere tra JSX o JS. Sono completamente intercambiabili!
In alcuni casi gli utenti / sviluppatori potrebbero anche scegliere JSX su JS, a causa dell'evidenziazione del codice, ma la maggior parte degli editor più recenti sta anche visualizzando correttamente la sintassi di reazione nei file JS.
I tag JSX ( <Component/>) non sono chiaramente javascript standard e non hanno alcun significato speciale se li metti in un nudo<script> ad esempio, tag . Quindi tutti i file React che li contengono sono JSX e non JS.
Per convenzione, il punto di ingresso di un'applicazione React è in genere .js anziché .jsx anche se contiene componenti React. Potrebbe anche essere .jsx. Qualsiasi altro file JSX di solito ha l'estensione .jsx.
In ogni caso, la ragione per cui c'è ambiguità è perché alla fine l'estensione non importa molto poiché il transpiler sgranocchia felicemente qualsiasi tipo di file purché in realtà siano JSX.
Il mio consiglio sarebbe: non preoccuparti.
var elem = <div>Text</div>;non è un elemento html standard; non supporta appendChild, classListe probabilmente altre caratteristiche html. Se vuoi i tag html direttamente in javascript è meglio usare il template letterale (il backtick `) insieme a innerHtmlo outerHtml.
Oltre al fatto menzionato che i tag JSX non sono javascript standard, il motivo per cui utilizzo l'estensione .jsx è perché con esso Emmet funziona ancora nell'editor - sai, quell'utile plug-in che espande il codice html, ad esempio ul> li in
<ul>
<li></li>
</ul>"emmet.includeLanguages": { "javascript": "javascriptreact" }:, ma sì, sono d'accordo che il codice JSX dovrebbe usare l'estensione .jsx se possibile.
Come altri menzionati JSXnon è un'estensione Javascript standard. È meglio nominare il punto di ingresso dell'applicazione in base .jse per gli altri componenti, è possibile utilizzare .jsx.
Ho un motivo importante per cui sto usando .JSXper tutti i nomi dei file dei componenti. In realtà, in un progetto su larga scala con un sacco di codice, se impostiamo tutti i componenti di React con .jsxestensione, sarà più facile navigare tra i diversi file javascript nel progetto (come helper, middleware, ecc.) E sai che questo è un componente React e non altri tipi di file javascript.
JSX non è JavaScript standard, in base alla guida di stile di Airbnb 'eslint' potrebbe prendere in considerazione questo schema
// filename: MyComponent.js
function MyComponent() {
return <div />;
}come avvertimento, se hai assegnato il nome al tuo file MyComponent.jsx, a meno che se modifichi la regola eslint puoi consultare la guida di stile qui