无法找到.jsx之间真正的区别和js文件

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?

Answer 1

该位是 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> 

这只能是因为你加载你的.js文件如text/babel。与text/javascript尝试它，你会得到以下错误：

Uncaught SyntaxError: Unexpected token <

阵营自己的文档对JSX这里的好文章：JSX In Depth。