Menu
I would like to understand the technical difference between them so as to determine the appropriate one to use.
I've realised that they can both have same content and sometimes used interchangeably in some projects.
How does .jsx files differ from .js?
935
JS is standard javascript, JSX is an HTML-like syntax that you can use with React to (theoretically) make it easier and more intuitive to create React components. As the docs say, the only purpose is to make it easier to create React components... there's not much else there.
As already mentioned, there is no difference, if you create a file with . jsx or . js .
What is JSX? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
React library has JSX (JavaScript XML), which is HTML like syntax, which is processed into JavaScript calls. React components are reusable which helps while working on larger scale projects and has their own logic and controls. One-way data binding provides better control throughout the application.
Difference Between JS and JSX: JS is standard JavaScript, JSX is an HTML-like syntax that you can use with React to (theoretically) make it easier and more intuitive to create React components. As the docs say, the only purpose is to make it easier to create React components... there's not much else there.
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.
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that lets you use HTML tags right inside your JavaScript file. Instead of creating, configuring, and appending your HTML tags through JavaScript objects, you can create the elements using an XML-like syntax that will generate the DOM elements for you behind the scenes.
JSX tags ( <Component/>) are clearly not standard javascript and have no special meaning if you put them inside a naked <script> tag for example. Hence all React files that contain them are JSX and not JS. By convention, the entry point of a React application is usually .js instead of .jsx even though it contains React components.
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')); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
