Not able to find real difference between .jsx and js file

Question

My .js file is:-

var React = require('react');
export default class AmortizationChart extends React.Component {
    render() {
        var items = this.props.data.map(function (year, index) {

            return (

                <tr key={index}>

                    <td>{index + 1}</td>

                    <td className="currency interest">{Math.round(year.interestY).toLocaleString()}</td>

                    <td className="currency">{Math.round(year.balance).toLocaleString()}</td>

                </tr>

                );

});

Now same I can Write also in .jsx file.So what is the difference which file I sould take .js or .jsx?

You can find a good answer here : http://stackoverflow.com/questions/27887678/react-js-what-extension-to-use-jsx-or-just-js — Mojo Allmighty, Nov 24 '16 at 11:45

score 3 · Answer 1 · answered Nov 24 '16 at 11:44

This bit is JSX:

<tr key={index}>
  <td>{index + 1}</td>
  <td className="currency interest">{Math.round(year.interestY).toLocaleString()}</td>
  <td className="currency">{Math.round(year.balance).toLocaleString()}</td>
</tr>

This only works because you're loading your .js file as text/babel. Try it with text/javascript and you'll get the following error:

Uncaught SyntaxError: Unexpected token <

React's own documentation has a good article on JSX here: JSX In Depth.

Not able to find real difference between .jsx and js file

1 Answers1