1

¿Qué sucede si cambio las extensiones de mis archivos en mi proyecto de Js a Jsx?. ¿Cuándo debería usar una extensión u otra?

Como pueden observar soy muy nuevo en React. :)

1
  • Si escribes solamente código en javascript puro y plano entonces tus archivos deben tener de extensión .JS, por el contrario si usas está sintaxis entonces tus archivos deben tener extensión .jsx
    – user128299
    el 16 sep. 2020 a las 6:20

2 respuestas 2

4

No es necesario que los archivos tengan .jsx como extensión. De hecho, el equipo de React decidió utilizar extensión de archivos .js como predeterminada. Es por esto que cuando inicializamos un nuevo proyecto con create-react-app las extensiones de archivo JavaScript terminan en .js.

La realidad es que el module bundler (Webpack) transpila los archivos usando Babel y se encarga automáticamente de detectar qué archivos JavaScript tienen JSX.

TLDR: La convención general es usar .js para proyectos que usan React, pero si usas .jsx también va a funcionar.

0

React por defecto te va a compilar tanto los archivos js como jsx entre otros como:

js  -> Archivos JavaScript
mjs -> Modulos EcmaScript 
jsx -> Extensión de la sintaxis de JavaScript(nos permite mezclar JS y HTML y XML)
ts  -> TypeScript
tsx -> Igual que jsx solo que es usado con TypeScript

Puedes ver más aquí

Como comento @BetaM, no debes usar la extensión js cuando estas usando una sintaxis como JSX aparte de que es mala practica, también te puede dar problemas en el futuro.

Básicamente usa js solo cuando tengas código puro de JavaScript y jsx cuando vayas a mezclar cosas como html, css o XML. Lo mismo pasa con otras extensiones

2
  • Este tipo de código mezcla html y javascript y todo React es así. Por lo que dices, todos los archivos deberían ser jsx. Si embargo la respuesta de Juan Marco tiene lógica. Parece que está convergiendo todo hacia JS. <div className=""> <i className="material-icons text-danger" onClick={() => onDeleteLink(link.id)}> close </i> <i className="material-icons" onClick={() => setCurrentId(link.id)}> create </i> el 16 sep. 2020 a las 15:50
  • No digo que todos los archivos deben de ser jsx, si no que usa la extensión que sea mas adecuada según el código que vaya a escribir
    – MitaCloud
    el 16 sep. 2020 a las 16:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.