ReactJS - JS vs JSX

Question

There is something I find very confusing when working in React    There are plenty of examples available on internet which use  js files with react but many others use  jsx files    I have read about  jsx files and my understanding is that they just let you write html tags within your javascript  But the same thing can be written in  js files as well    So what is the actual difference between these two extensions  js and  jsx

User · Answer

JSX tags   lt Component  gt   are clearly not standard javascript and have no special meaning if you put them inside a naked  lt script gt  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  It could as well be  jsx  Any other JSX files usually have the  jsx extension   In any case  the reason there is ambiguity is because ultimately the extension does not matter much since the transpiler happily munches any kinds of files as long as they are actually JSX   My advice would be  don t worry about it

User · Answer

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

User · Answer

In most of the cases it   s only a need for the transpiler bundler  which might not be configured to work with JSX files  but with JS  So you are forced to use JS files instead of JSX    And since react is just a library for javascript  it makes no difference for you to choose between JSX or JS  They   re completely interchangeable   In some cases users developers might also choose JSX over JS  because of code highlighting  but the most of the newer editors are also viewing the react syntax correctly in JS files

User · Answer

Besides the mentioned fact that JSX tags are not standard javascript  the reason I use  jsx extension is because with it Emmet still works in the editor - you know  that useful plugin that expands html code  for example ul li into   lt ul gt     lt li gt  lt  li gt   lt  ul gt

User · Answer

As already mentioned  there is no difference  if you create a file with  jsx or  js  I would like to bring another expect of creating the files as  jsx while creating a component  This is not mandatory  but an architectural approach that we can follow  So  in large projects we divide our components as Presentational components or Container components  Just to brief  in container components we write the logic to get data for the component and render the Presentational component with props  In presentational components  we usually donot write functional logic  presentational components are used to represent the UI with required props  So  if you check the definition on JSX in React documents  It says  const element    lt h1 gt Hello  world  lt  h1 gt    It is called JSX  and it is a syntax extension to JavaScript   We recommend using it with React to describe what the UI should look like   JSX may remind you of a template language  but it comes with the full power of JavaScript   JSX produces React    elements     Instead of artificially separating technologies by putting markup and logic in separate files  React separates concerns with loosely coupled units  called    components    that contain both    React doesn   t require using JSX  but most people find it helpful as a visual aid when  working with UI inside the JavaScript code  It also allows React to show more useful  error and warning messages   It means  It s not mandatory but you can think of creating presentational components with   jsx  as it actually binds the props with the UI  and container components  as  js files as those contains logic to get the data  It s a convention that you can follow while creating the  jsx or  js files  to logically and physically separate the code

User · Answer

JSX isn t standard JavaScript  based to Airbnb style guide  eslint  could consider this pattern      filename  MyComponent js function MyComponent       return  lt div   gt       as a warning  if you named your file MyComponent jsx it will pass   unless if you edit the eslint rule  you can check the style guide here

User · Answer

As other mentioned JSX is not a standard Javascript extension  It s better to name your entry point of Application based on  js and for the rest components  you can use  jsx   I have an important reason for why I m using  JSX for all component s file names   Actually  In a large scale project with huge bunch of code  if we set all React s component with  jsx extension  It ll be easier while navigating to different javascript files across the project like helpers  middleware  etc   and you know this is a React Component and not other types of the javascript file

[reactjs] ReactJS - .JS vs .JSX

Examples related to reactjs

Examples related to jsx