無法找到.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。