Reactjs - .Js VS .Jsx

ReactJS - .JS vs .JSX

There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is.

There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.

There's a good discussion here available for read

What is the difference using .js and .jsx as file endings for Reactjs?

Ok, so both are file extensions generally meant to write or define your React components. When React evolved, it brought the JSX syntax with it and developers started to write their components inside .jsx files. With the help of Babel transpilers, JSX was transpiled to JS.

Now with Babel and Webpack bundlers, you need not worry about .jsx or .js. Finally, everything will be bundled into JavaScript. And remember one thing, the web browser does not understand .jsx files or JSX syntax. It is ultimately JavaScript that runs inside the browser.

Usually, we use .jsx when your file contains only JSX and defines a User Interface, so it’s simpler for you to understand what the file will actually contain. An example below,

//profile.jsx
var profile = <div>  
    <img src="avatar.png" className="profile" />  
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

What is the difference between .js, .tsx and .jsx in React?

• .js is JavaScript, plain and simple

const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};

• .ts is TypeScript, Microsoft's way of adding "concrete" types to JavaScript

const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};

• .jsx is JavaScript but with JSX enabled which is React's language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted

const Foo = () => {
    return <div>Hello World!</div>;
};

• .tsx is similar to jsx except it's TypeScript with the JSX language extension.

const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

All of these will compile down to JavaScript code. See also React Without JSX

---

Bear in mind that just because it has a certain extension, doesn't mean that that is what the file actually is (frustratingly). I have run into several projects that use .js as an extension for files that include JSX syntax as well as a few that even include TypeScript.

using JSX file format instead of JS?

Use the .jsx, if you are creating React Components with HTML code (e.g. Components, html tags etc, then use .js for pure javascript code only like creating utils and etc.

What is the technical difference between .jsx and .js files

Update for Newer Users

The JSX Compiler tool has been removed as JSXTransformer has been deprecated. The React Team recommends using another tool such as the Babel REPL.

---

If you wish to keep the JSX source code intact for better maintainability, I would keep them as .jsx files. Using the JSX Compiler, either manually or via build script, will convert your JSX syntax to normal JavaScript files.

Note: It is possible to serve JSX files in your production environment but React will give you console notices about reduced performance.

---

Personally, I would use something like gulp-jsx or gulp-reactify to convert the files.

Example with gulp-jsx:

var gulp = require('gulp');
var jsx  = require('gulp-jsx');

gulp.task('build', function() {
  return gulp.src('path/to/*.jsx')
    .pipe(jsx())
    .pipe(gulp.dest('dist'));
});

What does extension jsx do exactly?

There is no actual functional difference except maybe an editor/plugin that detects JSX and lints/formats differently. Some use the standard that .js files should contain content that works as standard vanilla JS. JSX obviously would not work as a vanilla JS file so you use .jsx to symbolize that and let other developers know.

---

Related Topics